Angular - 图像不会以相对路径显示答案

【问题标题】：Angular - Images won't display with relative pathAngular - 图像不会以相对路径显示
【发布时间】：2017-06-13 16:56:48
【问题描述】：

我正在使用相对路径在我的应用程序中显示图像。在我将应用程序更新到最新版本的 Angular (4.1.3) 之前，它一直运行良好。我没有任何错误，我的图像也不再显示。

我在app.component.html：

<img src="/src/images/settings.png" />

我的应用结构：

► e2e
► node_modules
► obj
▼ src
    ▼ app
        app.component.html
        app.component.ts
        app.module.ts
    ► assets
    ► environments
    ▼ images
        settings.png
    index.html
    main.ts
    polyfills.ts
    styles.css
    tsconfig.app.json
    tsconfig.spec.json
    typing.d.ts
.angular-cli.json
.editorconfig
.gitignore
karma.conf.js
package.json
protactor.conf.js
tsconfig.json
tslint.json

我尝试了this question 中建议的许多路径，但没有一个有效。这个问题的不同之处在于我没有任何错误，我的应用程序正在运行，图像只是没有显示。奇怪的是，在我更新我的应用程序之前它运行良好。

这可能来自哪里的任何想法？

【问题讨论】：

您应该添加angular-cli 作为标签。我认为这里很重要。

标签： html image angular angular-cli

【解决方案1】：

您正在使用 angular-cli。确保在 .angular-cli.json 的 app.assets[] 块中有 images，以便它以与资产目录相同的方式打包。然后，将路径更改为images/settings.png

或者，您可以将images 目录移到应该已经打包的assets 文件夹中。

【讨论】：

两种方法都有效，谢谢！你知道为什么它在更新之前工作吗？这种错误与angular版本无关吧？
您是从哪个版本更新的？我不确定会发生什么变化 - 我一直确保在输出中添加我想要的任何内容到该数组（否则它不会为应用程序打包）
我在 Angular 4.0 运行 npm 更新，它更新了很多模块；所以我不记得更新的每个模块，但我从 angular 4.0 到 4.1.3 我以后会更加小心，无论如何谢谢你:)

【解决方案2】：

考虑到您的应用树，不会是 images/settings.png 吗？

您的 images 文件夹与 index.html

的高度相同

【讨论】：

否它不起作用，并且在我将应用程序更新到最新版本的 angular 之前，此路径运行良好，在我的示例中，我从 app.component.html 调用我的图像