【问题标题】:Angular 5 images not loading from assets directoryAngular 5图像未从资产目录加载
【发布时间】:2018-11-23 05:49:11
【问题描述】:

我正在尝试从资产目录加载图像,但它们没有加载到视图中。这就是正在发生的事情;

  1. 在资产目录中,我有一堆子文件夹,子文件夹中有图像(例如图标和标志)

assets_ |-img_ |-icons_ |-copyright.png |-flags_ |-ch.png |-us.png

  1. 在视图中,图像路径为

<img src="assets/img/flags/jp.png" alt=""><img src="assets/img/icons/copyright.png" alt="">

  1. 错误。

由于奇怪的原因,图像尚未加载到视图中,icons 目录中的图像加载正常。

当我检查时,我发现了以下网络调用,它从根目录而不是 assets 查找图像。

第二,它说类型是text/html而不是png,发起者是VM639:330?!

但是,当我进一步向上滚动时,我发现之前加载的图像很好,类型和启动器也很好(pngindex)。

这里到底出了什么问题?为什么我无法从 assets 目录加载图片?

【问题讨论】:

  • 因此,对于资产文件夹中的每张图片,除了flags 之外,它都可以正常工作?你能仔细检查一下除了assets/img/之外没有引用其他标志,所以不是以/开头的吗?关于“类型”的评论:因为/img/flags/jp.png 没有文件,所以 angular-cli 开发服务器默认响应主页。这是一个text/html 文件,所以没关系。
  • 谢谢,这实际上是解决方案 - 我搜索了整个项目,发现一个 js 脚本负责重置路径。你可以回答这个问题,所以我可以选择它作为答案
  • 不确定这是否真的是 Stackoverflow 的“问题”,因为问题只是因为拼写错误......

标签: html angular


【解决方案1】:

我有同样的问题,资产/图像中的图像或图标无法显示(404 未找到)。 为了解决这个问题,我在我的 component.ts 中定义了一个这样的变量

img = require('../../../../assets/images/excel.png')

点数取决于源文件夹中的模板位置。 在模板中我选择了这个

 <img  [src]="img"/>

注意:这不是最好的解决方案,我正在寻找更好的解决方案。

【讨论】:

    猜你喜欢
    • 2018-11-23
    • 2019-05-09
    • 1970-01-01
    • 2019-10-28
    • 2015-01-10
    • 1970-01-01
    • 2017-11-28
    • 2019-11-06
    • 2011-03-10
    相关资源
    最近更新 更多