构建Angular项目后图片无法显示

Question

我已经完成了我的应用程序编码，并尝试将其构建为生产模式。在测试应用程序后，我发现应用程序中的图像未显示为标志...但开发模式下没问题。这是我的项目树:

您可以在此处查看生产模式下项目的结构

是否需要将webpack添加到我的项目中以解决此问题？

我还想问一下webpack的功能，因为我的项目不包括webpack，我发现必须在我的应用程序中安装它。

- Yassine CHABLI

---

你的图片在 dist/assets 文件夹里吗？它们在 HTML 中的引用是否正确？至于 webpack，Angular CLI 已经使用了 webpack，不需要再添加。 - Ahmed Musallam

你是如何构建你的应用程序的？你使用了 deployUrl 还是 base-href？在控制台中是否出现图片 404 的错误？ - ulubeyn

@AhmedMusallam，在我的资产中，我有一个名为images的文件夹，其中包含我的图像，但在HTML中引用不正确，我必须从URL中删除一些字符，如“../”，然后它就解决了。 - Yassine CHABLI

@ulubeyn 我已经部署了，请尝试运行以下命令：ng build --prod。 - Yassine CHABLI

问题已经解决，我只是将 href 从 "../assets/images/logo.png" 改为 "assets/images/logo.png"。 - Yassine CHABLI

我也遇到了同样的问题。将图片路径从“../assets/images/logo.png”更改为“assets/images/logo.png”不应该是理想的解决方案。正在寻找一些体面的解决方案。请帮忙。 - Devesh M

Answer 1

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

你应该去掉图片路径开头的斜杠。因此，你需要使用<img src="assets/image.png"，而不是<img src="/assets/image.png"

只是补充一下@CybrRob的答案。

- Humeid Jocordasse

Answer 2

只需更改您的路径从

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

到

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

- Abhishek joshi

Answer 3

Angular会在assets文件夹中查找图片，因此在你的HTML中使用<img src="assets/image.png"，不要包含"../"

- CybrRob

---

欢迎来到 StackOverflow。虽然这个解释可能解决了问题，但包括一个说明如何以及为什么解决该问题的示例代码会在提高您的帖子质量的同时有助于获得更多的赞成票。请记住，您正在为未来的读者回答问题，而不仅仅是现在提问的人。我建议您编辑您的答案并添加一些代码示例，请参见→ 如何撰写良好的答案？谢谢！ - Federico Baù