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

Ionic Framework ionic-v3
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 !!!

5

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

    <ion-row>

      <ion-col size="6"

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

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

      </ion-col>

    </ion-row>

  </ion-grid>