构建角度项目后图像未显示

Question

我已经完成了我的应用程序的编码，我尝试将它构建到生产模式，并且在测试应用程序之后，我看到图像没有在应用程序中显示为徽标......但是开发模式没问题。 这是我项目的树：

你可以在这里看到生产模式下的项目结构

是否有必要将 webpack 添加到我的项目中来解决这个问题？

我还想问你关于 webpack 的功能，因为我的项目不包括 webpack，我发现它是我的应用程序所必需的。

Answer 1

就我个人而言，我什至不知道它是什么 webpack（我并不为此感到自豪），但我知道你为什么会遇到这个问题。

您应该去掉图像路径开头的斜线。 所以你必须使用 <img src="assets/image.png" 而不是 <img src="/assets/image.png"

只是为了添加@CybrRob 的答案。

Answer 2

Angular 在 assets 文件夹中查找图像，因此在您的 html 中，使用 <img src="assets/image.png" 不要包含“../”

Answer 3

只是改变你的路径

<img src="../../assets/g5.jpg" alt="">

至

<img src="assets/g5.jpg"  alt="">