Как загрузить изображение в Angular?

Question

У меня есть этот код, но Angular не загружает изображения. Компоненты источника изображений и списка находятся в подпапках папки приложения. 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>

Я пробовал оба способа, но источник img все еще не работает.

Answer 1

Попробуйте повернуть диагональную линию в другую сторону

Вместо того, чтобы писать

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

напишите

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

Answer 2

вам нужно сохранить изображение в папке с активами и указать URL-адрес этого пути. Тогда вам хорошо go.

Answer 3

Думаю, с вашим кодом проблем нет. Может быть, на вашем пути есть проблемы. вы можете увидеть на вкладке сети в режиме отладки браузера. Чеч у тебя 404 получается? Если вы получаете 404, нажмите URL-адрес и убедитесь, что ваше изображение отображается в browser.

один - URL файла, другой - http