html中的Angular 4/5图像路径答案

【问题标题】：Angular 4/5 image path in htmlhtml中的Angular 4/5图像路径
【发布时间】：2018-10-24 03:08:13
【问题描述】：

我的工作区结构如下所示：

src/
   app/
   asset/
       img1.png
       img2.png
       img3.png

... 如您所见，应用文件夹和资产文件夹在同一级别。我的索引文件也在 src 文件夹中。我正在尝试在我的组件中加载图像，但无法使其显示，并且我一直收到错误消息，例如：

GET http://localhost:4200/asset/img1.png 404 (Not Found)

我的 html 看起来像这样：

<img style="height: 395px; width: 360px;" src="asset/img1.png">

路径的任何解决方案？

【问题讨论】：

文件夹名称是asset 还是assets？ Angular 默认创建assets。请检查
没关系...我有角度资产文件夹，但我创建了资产文件夹供我使用
您必须将此新文件夹（“asset”）添加到 Angular json 配置文件中的“assets”数组中。无论如何，有什么好的理由使用不同的文件夹，而不是 angular 团队定义的默认文件夹？
我设法将“asset”文件夹移动到我的默认角度“image”文件夹下，并将路径更改为 image/asset/img1.png，现在它运行良好。谢谢

【解决方案1】：

默认情况下，资产文件夹的名称是assets。这是在.angular-cli.json 的apps->assets 设置中设置的。

当您将文件放在那里时，您应该能够像您一样链接它们：<img style="height: 395px; width: 360px;" src="assets/img1.png">

【讨论】：

【解决方案2】：

将您的文件夹添加到.angular-cli.json 文件中，如下所示。

所有从src文件夹创建的自定义文件都需要在这里添加。

"apps": [{
    "root": "src",
    "outDir": "dist",
    "assets": [
        "assets",
        "asset" // <-- Like this
    ],
........
}]

【讨论】：