How to load an image in Angular?

Question

I have this code but Angular is failing to load images. Images source and list components are subfolders of the app folder. list.component.ts:

@Component({
    selector: "app-list",
    templateUrl: "./list.component.html",
    styleUrls: ["./list.component.css"]
})
export class ListComponent{
    
    posts = [
        {title: "Hello" ,path: "../img/9ed86f4d59363daf10f67d41282cab6b.jpg"},
        {title: "world", path: "C:\Users\iglij\Desktop\test\webapp\src\app\img\download.jpg"},
        {title: "hi" ,path: "C:\Users\iglij\Desktop\test\webapp\src\app\img\img_girl.jpg"},
        {title: "from" ,path: "C:\Users\iglij\Desktop\test\webapp\src\app\img\photo-1494548162494-384bba4ab999.jpg"},
        {title: "there" ,path: "C:\Users\iglij\Desktop\test\webapp\src\app\img\photo-1535332371349-a5d229f49cb5.jpg"}
    ] ;
}

list.component.html:

<div class="container" *ngFor="let post of posts">
    <div class="holder">
        <h3>{{post.title}}</h3>
        <img [src]="post.path" width="500" height="600">
    </div>
</div>

I tried both ways with img source still dosen't work.

Answer 1

I think your code has no problem. May be your path have some problem. you can see in your network tab in debugging mode of browser. Chech have you getting 404? If you getting 404 then hit the URL and make sure that your image is shown in the browser.

Answer 2

Try to turn the diagonal line the other way

Instead of writing it

path: "C:\Users\iglij\Desktop\test\webapp\src\app\img\img_girl.jpg"

write it

path: "C:/Users/iglij/Desktop/test/webapp/src/app/img/img_girl.jpg"

Answer 3

you need to store image in asset folder and give url of that path. Then You are good to go.