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

Has anyone solved this if your photos are coming from a service? I am just doing the Ionic 5 Photo Gallery tutorial. And I have this error. The following doesn’t solve it.



      <ion-col size="6"

        *ngFor = "let photo of photoService.photos; index as position">

        <ion-img *ngIf="photo.webviewPath" [src]="photo.webviewPath"></ion-img>