Image not loading in Angular 11

Question

I can view my image from direct URL apply in src tag but if I tried load as dynamically it's throwing error. I tried [src]="img.ImagePath" this method also I'm getting same response

Console log. Error

HTML

<div *ngFor="let img of imageData">
   <img [alt]="img.Name" src="{{img.ImagePath}}}">
</div>

component.ts

 getImages() {
   this.image.getImage().subscribe(res => {
   this.imageData = res;
    console.log(res);
 });
}

service.ts

  getImage() {
    return this.http.get('https://localhost:44349/api/second?id=2');
  }

My API run in https://localhost:44349/ and my angular application is running in http://localhost:4200/

Did you add your Images folder to "assets" in angular.json? https://angular.io/guide/workspace-config#assets-configuration — Yannick Beauchamp-H, Jul 23 '21 at 03:22

score 0 · Answer 1 · answered Jul 23 '21 at 03:39

0

Depending on how you have set up change detection it could be that your component is not being marked for check.

A better idea for handling asynchronous data with templates is to use the async pipe in the template

HTML

<div *ngFor="let img of (image.getImage() | async)">
  <img [alt]="img.Name" src="{{img.ImagePath}}}">
</div>

This will handle subscription and more importantly clean-up. More reading:

answered Jul 23 '21 at 03:39

Calummm

819
1
8
21

Sorry I don't understand what you mean by "not my image‘ – Calummm Jul 24 '21 at 09:40
my bad. I fixed it as below. **** – valdimar Jul 24 '21 at 13:18

score 0 · Answer 2 · answered Jul 23 '21 at 13:25

0

I just changes image URL to my API like below

 <img src="https://localhost:44349/{{img.ImagePath}}">

Is it safe if I sue like this?

answered Jul 23 '21 at 13:25

valdimar

3
4

score -1 · Answer 3 · answered Jul 23 '21 at 06:55

Hi,

First thing, you should check for the path comming from the response.

Second thing, if path for the images in response, then that image must be there in specified folder , here I think you have Images folder

Third thing, showing 404 means you should check folder structure for image path where it resides and then check again, it will work>

Image not loading in Angular 11

3 Answers3

HTML