【问题标题】:images not showing up after build angular project构建角度项目后图像未显示
【发布时间】:2023-03-16 02:57:01
【问题描述】:

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

you can see here the structure of the project in production mode

是否需要在我的项目中添加 webpack 来解决这个问题?

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

【问题讨论】:

  • 您的图片在dist/assets 中吗?它们在您的 HTML 中是否正确引用?至于 webpack,angular cli 使用 webpack,不需要添加。
  • 您是如何构建您的应用程序的?您使用的是deployUrl 还是base-href?您是否在控制台中收到 404 图像?
  • @AhmedMusallam,在我的资产中,我有一个名为 images 的文件夹,其中包含我的图像,但在 html 中没有正确引用,我必须从 url 中删除一些像 '../' 这样的字符,然后它解决了。
  • 问题已解决,我只需将 href 从“../assets/images/logo.png”更改为“assets/images/logo.png”
  • 我也面临同样的问题。将图像路径从“../assets/images/logo.png”更改为“assets/images/logo.png”到 prod build 应该不是理想的解决方案。寻找一些下降的解决方案。请帮忙。

标签: javascript image angular angular-cli production-environment


【解决方案1】:

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

您应该去掉图像路径开头的斜线。所以你必须使用

只是为了补充 @CybrRob 的答案。

【讨论】:

    【解决方案2】:

    Angular 在 assets 文件夹中查找图像,因此在您的 html 中,使用

    【讨论】:

    • 欢迎来到 StackOverflow。虽然这种解释可能会解决问题,但包括如何以及为什么解决问题的示例代码将真正有助于提高您的帖子质量,并可能导致更多的赞成票。请记住,您正在为将来的读者回答问题,而不仅仅是现在提问的人。我建议您编辑您的答案以添加一些代码示例,看看这里 → How do I write a good answer? 谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-11
    相关资源
    最近更新 更多