无法显示 Angular 下资产部分中列出的某些图像

Posted

技术标签:

【中文标题】无法显示 Angular 下资产部分中列出的某些图像【英文标题】:Can't display some images listed in assets section under Angular 【发布时间】:2018-06-14 07:00:54 【问题描述】:

我已经完成了我的研究,发现 one 或 two 的答案解释了我应该在 angular-cli.jsonassets 部分定义我的文件/em> 文件。我做了如下。

"assets": [
  "assets",
  "mylogo.png",
  "favicon.ico"
],

稍后,我在模板中执行以下操作。

<img src="mylogo.png">
<img src="favicon.ico">

第一个显示为断开的链接,而第二个(默认的 Angular 图标)显示得很好。我无法理解,因为它们都驻留在同一个目录中,并且都在配置文件中被引用。

我错过了什么?

【问题讨论】:

您可能还有另一个favicon.ico。此外,网站图标的缓存时间往往比其他资产更长。使用开发人员工具检查构建,以确定 mylogo.png 实际指向的位置。 @LazarLjubenović 你能详细说明检查部分吗?我怎么做?我可以看到控制台输出说 localhost:4200/mylogo.png 是 404 但更重要的是,我迷路了...... 【参考方案1】:

我遇到了同样的问题,但我想显示一个自定义图标。 我的解决方案是删除 facicon.ico 和 .angular-cli.json 中的 decleration。

"assets": [
  "assets",
  "house.png"
 ],

我在 html index.html 中的实现

<link rel="icon" type="image/x-icon" href="house.png" />

The implemented custom Icon

然后重新启动您的应用程序。

【讨论】:

可能是 ng serve 需要重新执行(至少在某些浏览器/操作系统中)。此外,它可能有助于清理缓存,以防万一。

以上是关于无法显示 Angular 下资产部分中列出的某些图像的主要内容,如果未能解决你的问题,请参考以下文章

Angular - 捆绑时加载资产

无法从组件中的资产加载 css

Angular CLI 9 - 无法复制资产:EFAULT:系统调用参数中的错误地址,copyfile

某些资产图像未在 Ionic 应用程序中显示

AngularCLI 和 Angular Material(原理图)错误:无法解析集合“@angular/material”

背景图全屏显示