Question

我正在尝试将图像嵌入到我的角度项目中，但是我收到了一个无法找到图像的错误。

GET http://localhost:4200/logo.svg 404 (Not Found)

我尝试使用标准方法嵌入图像，就像这样

<img src="../logo.svg">

我检查了源代码并尝试了其他文件格式。

Answer 1

@Parth Ghiya评论了我的问题的答案。我不得不将图像放到/ src / assets文件夹中。 Angular现在能够找到图像。

Answer 2

静态资源（图片、字体、json 文件等）应该添加到 assets 文件夹中。默认情况下，无论你在 assets 文件夹中放置什么，你都可以直接从浏览器访问它并通过 HTTP 请求进行查询：

?src
 ┣ ?app
 ┃ ┣ ?core
 ┃ ┣ ?shared
 ┃ ┣ ?app-routing.module.ts
 ┃ ┣ ?app.component.ts
 ┃ ┣ ?app.module.ts
 ┣ ?assets
 ┃ ┣ ?img
 ┃ ┃ ┗ ?logo.png // this will be served
 ┣ ?static
 ┃ ┃ ┗ ?background.png // this won't be served unless you added to the assets array
 ┣ ?environments
 ┣ ?styles
 ┣ ?favicon.ico
 ┣ ?index.html
 ┣ ?main.ts
 ┣ ?polyfills.ts

现在，如果您想使用 logo.png 文件夹中的 assets/img 图像，您可以这样做：

<img src="assets/img/logo.png" alt="logo">   <!-- OK  :)   ->
<img src="static/background.png" alt="logo"> <!-- Not OK :(->

如果要使用background.png文件夹内的static，需要在static文件内的assets数组中包含angular.json文件夹：< /p>

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

<img src="assets/img/logo.png" alt="logo">   <!-- OK :) ->
<img src="static/background.png" alt="logo"> <!-- OK :) ->

我想强调最好不要：

使用 src/ 引用您的静态资源（图像等）。
使用相对路径 ../logo.png。

Answer 3

如果您想使用src文件夹中的图片，请告诉您app.component.html：

.row1

每个<img src="../../src/logo.svg">为您提供一个文件夹

Answer 4

对我来说，尺寸是唯一的问题。当我现在更改尺寸时，它会显示我的影像路径 /src/assets/images/products/white.jpg

我的图片网址是： /assets/images/products/white.jpg

Answer 5

错误

<img src="src/static/images/logo.png" alt="" width="49" height="35">

解决方案（取出src）

<img src="static/images/logo.png" alt="" width="49" height="35">

高兴并“欢迎来到scatman的世界！” ..

Answer 6

我遇到了同样的错误，并且我知道您可以在资产属性中更新angular.json。就我而言，我添加了“ src / img”来获得新的文件夹位置并可以正常工作。

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

Answer 7

这对我有用。

在 angular.json 中添加资产中的路径。示例如下。

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

在 component.html 中添加这个

  <img [attr.src]="'assets/images/logo.png'" alt="logo">

Answer 8

Brian的解决方案对我有用

解决方案（取出src）

<img src="static/images/logo.png" alt="" width="49" height="35">

Answer 9

首先，您需要在 / src / assets / 文件夹中添加图像。然后输入如下内容。

这对我有用！

htmlfile.html

<img src="assets/image/imageName.jpg" >

角度，未找到图像（GET 404）

9 个答案: