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


#1

Hello,

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-list>
      <ion-item>
        <ion-avatar item-start>
       <img [src]="profilePicture"> 
        </ion-avatar>
      </ion-item>
    </ion-list>

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


#2

can you show the value of profilePicture variable


#3

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


#4

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 !!!