Angular：无法加载图像：404（未找到）答案

【问题标题】：Angular : Failed to load images: 404 (Not Found)Angular：无法加载图像：404（未找到）
【发布时间】：2018-11-11 23:20:49
【问题描述】：

我下载 this free theme 以便在我的 WebStorm 角度项目中使用它，但我收到此错误：
Failed to load resource: the server responded with a status of 404 (Not Found) 并且即使路径正确也没有加载图像。谁能帮我解决这个问题？

这是一个sn-p的代码：

 <a class="navbar-brand brand-logo" href="index.html"><img src="images/logo.svg" alt="logo"/></a>
      <a class="navbar-brand brand-logo-mini" href="index.html"><img src="images/logo-mini.svg" alt="logo"/></a>

What i get

Directory tree structure

PS： 我确实在加载 CSS 和 JavaScript 文件时遇到了问题，但我已经通过在 css 链接中添加 type="text/html" 和 type="application/json" 解决了这些问题JavaScript 链接。您认为这可能是 JSON 问题吗？

【问题讨论】：

你的代码怎么样，在你加载那些没有找到的图片时显示一些代码。
@CassianoMontanari 我用一些代码编辑了我的问题
使用/images/logo-mini.svg，app文件夹是你的根文件夹，所以以/开头
您确定图片已下载吗？检查浏览器的网络标签？
无法获取 /images/dashboard/img_4.jpg

标签： html css json bootstrap-4

【解决方案1】：

这里的答案：您必须在架构师>构建>选项>资产中的angular.json中添加路由：

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

在此之后，您必须停止它并重新启动您的应用。

来自 Ivan Gomez 的答案可能是真正的正确答案。这对我来说 100% 有效。图像目录不起作用的真正原因是 Angular 没有将其注册为资产目录。将图像添加到资产文件夹也是正确的，但是如果您希望自己的图像文件夹保存图像，则需要按照 Ivan 的指示将其添加到 angular.json 文件中。

【讨论】：

【解决方案2】：

您必须在架构师>构建>选项>资产中添加angular.json中的路线：

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

在此之后，您必须停止它并重新启动您的应用。

【讨论】：

【解决方案3】：

我通过将图像放入 Angular 的 assets 文件夹中解决了这个问题。以前我将它们放入app 文件夹并且也有404 错误，但放入assets 解决了我的问题。所以我像这样使用它们：

&lt;img src="assets/images/intro_room.jpg" alt="Intro Gallery Room Sample Pictures"&gt;

【讨论】：

【解决方案4】：

当一个文件夹，即图片和index.html文件在同一目录下时，路径应该以./开头

<img src="./images/logo-mini.svg" alt="logo"/>

【讨论】：

【解决方案5】：

尝试使用/ 开始您的图像源链接，例如/images/logo.svg

【讨论】：

你可以试试：../images/logo.svg？
@chimchim 你能试试吗？
没有变化:(

【解决方案6】：

我不知道你在assets目录里到底有什么，但是试着把css和images之类的所有静态文件放到assets目录下。

【讨论】：

这是一个 bootstrap 4 主题，没有资产文件夹。您可以从问题中的链接检查目录结构。