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

Posted 2023-03-13

【中文标题】无法显示 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 需要重新执行（至少在某些浏览器/操作系统中）。此外，它可能有助于清理缓存，以防万一。