图片未在 Angular 9 中加载答案

【问题标题】：Image Not Loading in Angular 9图片未在 Angular 9 中加载
【发布时间】：2020-08-25 18:35:58
【问题描述】：

HTML 文件：

<div>
<img src="/src/assets/img/menu.png" alt="LOGO">
</div>

这里的 New-Google-Logo.png 与 html 文件位于同一文件夹中。但是在 ng serve 之后，html 页面会加载其他详细信息，但不会加载图像。通过直接提供图像链接（如 www.google.com/images/x.png）尝试，它可以工作，但本地文件未加载。

文件夹树：

src
  -assets
    -img
              - menu.png

图像路径是正确的，我还在资产文件夹中添加了静态资产，angular-cli 使用默认 .angular-cli.json 提供服务

"assets": [
              "src/favicon.ico",
              "src/assets"
            ]

我有什么遗漏的吗？

编辑 2：我在控制台中收到此错误 GET localhost:4200/src/assets/img/menu.png 404（未找到）

【问题讨论】：

【解决方案1】：

1.您可以尝试停止nodejs服务器，然后将文件名更改为新文件名。 2.您可以仔细检查图像的扩展名是 .png .jpeg 还是 smth。 3.我建议在你的IDE中慢慢手动写入图像的路径，以便它可以自动填充图像的路径。

【讨论】：

【解决方案2】：

经过几次尝试，我得到了它。由于资产配置为位于 src/assets 中

"assets": [
              "src/favicon.ico",
              "src/assets"
            ]

这是你应该如何添加路径：

<div>
<img src="./assets/img/menu.png" alt="LOGO">
</div>

【讨论】：