Getting a 404 null error with Angular 7 [src] attribute

[rj]

I am trying to load an image using [src] attribute in Angular application. The image content renders fine outside when i load it up directly. However, with the app it gives me 404 null error.

HTML - 

<span class="pull-right">
            <img
              [src]="sampleImage"
              alt="{{ user.firebaseuser.displayName }}"
              class="img-responsive"
              style="max-height: 50px;">
</span>

Component class -

export class UserItemComponent implements OnInit {
      @Input() user: any;
      // @Input() index: number;
   
      sampleImage = 'https://americana-group.com/app/uploads/2017/11/koki1920x960-1048x524.jpg';
      constructor() { }
   
      ngOnInit() {
      }
    }

Error Details -   

http://localhost:4200/null 404 (Not Found)

What am i missing here?

[Sander Elias]

Hi Rj,

See https://stackblitz.com/edit/angular-3zbsfz?file=src%2Fapp%2Fsample%2Fsample.component.ts

that just works, there must be something different in your app?

Regards

Sander