<img [src]="profilePicture"> GET http://localhost:8100/null 404 (Not Found)



I’m using image path string from home.ts in app.components.ts side menu for profile image avatar:

in home.ts I have imported public events: Events to function:

 setImage() {
        this.events.publish('img:added', data);  

in app.components.ts with import of public events: Events constructor load to attach with profilePicture: string variable:

  getImage() {
    this.events.subscribe('img:added', (data) => {
      this.profilePicture = data.text();

to use it in app.html of app.components.ts side menu avatar:

        <ion-avatar item-start>
       <img [src]="profilePicture"> 

Image appears with icon, but Chrome console shows this error caused by <img [src]="profilePicture"> : GET http://localhost:8100/null 404 (Not Found) if I’m add <img *ngIf="profilePicture" [src]="profilePicture"> error disappears with image. Not sure how to figure out


can you show the value of profilePicture variable


Hello, @hirenkorat3 sure, it is Google Plus profile image or just image path like this: https://lh4.googleusercontent.com/-UserProfilePath/AAAAAAAAAAI/AAAAAAAAANc/2Wk_ewjEgMk/photo.jpg


this is encrypted url created by google so i think you can not directly use it.you can use only those url which display image directly in browser.try this url in your browser and see what you get !!!