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

Question

我正在使用相对路径在我的应用程序中显示图像。在我将应用程序更新到最新版本的 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

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

有什么想法可能来自于此吗？

Answer 1

您正在使用 angular-cli。确保

images

中的

app.assets[]

块中有

.angular-cli.json

，以便以与资产目录相同的方式打包。然后，将路径更改为

images/settings.png

或者，您可以将

images

目录移动到应该已经打包的 assets

 文件夹中。

Answer 2

考虑到你的应用程序树，不是

images/settings.png

 吗？

您的

images 文件夹与 index.html 高度相同

Answer 3

最近在课堂上与学生遇到同样的问题，

当我们进行 ng 构建时，看到 dist 文件夹不包含我们创建的 images 文件夹，环顾四周，发现有一个 asset 文件夹存在。

将图片放入assets文件夹中，按照路径进行操作，图片会出现在dist中，然后图片会在serve中弹出。

希望将来能帮助其他人。

（适用于版本 15）