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

Question

我下载了这个免费主题，以便在 WebStorm 的 Angular 项目中使用它，但我收到此错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

，即使路径正确，也不会加载图像。谁能帮我吗？

这是代码片段：

 <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>

我得到了什么

目录树结构

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

Answer 1

我通过将图像放入 Angular 的

assets

文件夹中解决了这个问题。之前我将它们放入

app

文件夹中，也出现了 404 错误，但放入

assets

解决了我的问题。所以我这样使用它们：

<img src="assets/images/intro_room.jpg" alt="Intro Gallery Room Sample Pictures">

Answer 2

尝试使用

/

启动图像源链接，例如

/images/logo.svg

Answer 3

当文件夹即图像和

index.html

文件位于同一目录中时，路径应以

./

开头

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

Answer 4

您必须在architect > build > options > asset中的angular.json中添加路由：

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

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

Answer 5

答案在这里：你必须在architect>build>options>assets中的angular.json中添加路由：

“资产”：[“src/favicon.ico”，“src/assets”，“src/images”]

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

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

Answer 6

我不知道你在assets目录中到底有什么，但尝试将所有静态文件（如css和图像）放入assets目录中。

Answer 7

“所以，我通过将这部分添加到我的代码中解决了我的问题：

   "assets": [
  {
    "glob": "**/*",
    "input": "public",
    "output": "/"
  },
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "/assets"
  }
]

我的目录结构是：

src/ 资产/ 图片/ 轮播/ image_1.webp image_2.webp image_3.webp