如何在 Angular 中加载图像？答案

【问题标题】：How to load an image in Angular?如何在 Angular 中加载图像？
【发布时间】：2020-06-21 09:51:55
【问题描述】：

我有这段代码，但 Angular 无法加载图像。图像源和列表组件是 app 文件夹的子文件夹。 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 源仍然无法正常工作。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

我认为您的代码没有问题。可能是你的路径有问题。您可以在浏览器的调试模式下的网络选项卡中看到。 Chech你有404吗？如果您收到 404，请点击 URL 并确保您的图片显示在 browser 中。

【讨论】：

【解决方案2】：

试着把对角线转过来

不用写了

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"

【讨论】：

【解决方案3】：

您需要将图像存储在资产文件夹中并提供该路径的 url。那么你就可以走了。

【讨论】：