Angular 6 无法从资产加载图像

Question

出于某种原因，我无法在我的应用程序中显示我的图片。这是错误，测试和 class:

The error: GET http://localhost:4200/assets/image.png 404 (Not Found)

<img class="logo" src="../../assets/image.png">
<img class="logo" src="../assets/image.png">
<img class="logo" src="assets/image.png">
//None of these work

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

知道为什么这不起作用吗？我的 image.png 在我的资产文件夹中，该文件夹位于 src/assets/image.png.

更新：

所以我们做了一个测试。我们将所有节点模块和项目文件复制到另一台电脑上，并在那里正确加载了图像。所以我认为问题出在 angular 项目之外。

Answer 1

src="assets/image.png" 应该可以正常工作。添加图像后是否重新启动构建？

Answer 2

<img class="logo" src="assets/image.png">

这是正确的路径，可能是其他地方出错了。

检查图像名称或它的 jpeg。也许您在资产文件夹中添加了一个新文件夹？，如果是这样的话代码应该是这样的

<img class="logo" src="assets/image/image.png">

Answer 3

试试这个 <img class="logo" src="./assets/image.png">

也右键单击您的图片并检查扩展名是否为 PNG 而不是 png，如果是则写 image.PNG

Answer 4

试试这个：

<div class="logo"></div>

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
    background:url('assets/image.png') no-repeat center center;
}

Answer 5

所以问题是 angular 项目位于导致错误的位置。在我的例子中，它位于一个 bitbucket 存储库中。我不确定这是否是错误的原因。

尝试将整个 angular 项目移动到其他位置。这为我解决了:)

@Rak2018 的解决方案是一个很好的解决方法，如果您想改用它的话

Answer 6

这是因为您没有访问文件的权限。

windows中的简单方法将您的项目从驱动器 C: 移动到其他驱动器。它工作正常。

祝你好运。

Answer 7

我也遇到了同样的问题。对我来说是在 assests 目录之前添加一个“/”：

Answer 8

我遇到了同样的问题，结果证明这是路径上区分大小写的问题。

在我的例子中，assets 下的图像文件夹在图像文件夹中是大写的 I。 /assets/Images/angularconnect-shield.png

所以请检查您的图片路径并确保它与完全匹配。

Answer 9

The folder which contains your assets (like pictures) needs to be declared in assets array inside your angular.json

Angular只识别在angular.json中声明的资产或来自网络的资产。

此外，以下所有三个选项都适合您：-

<img class="logo" src="assets/image.png">

Answer 10

按照网络上的其他教程，我创建了一个 src\app\assets\images 文件夹并将图像放在那里。但是，我的应用程序在 src\assets 中已经有一个资产文件夹。对此有两个修复。

或者：

将我的图像放入现有的 src\assets 文件夹中并引用为 <img src="src\assets\my-image.png"/> 或
将 src\app\assets 添加到我的 angular.json 资产声明和参考中，这是我 src\app\assets\images\my-image.png 的初衷。

Answer 11

将资产文件夹添加到您的 angular.json。

"assets": [
    "src/assets"
 ],

然后参考下面的图片，

<img src="/assets/image.png">

这应该有效。

Answer 12

如果是由于 'ng serve' 托管的 URL 区分大小写，可以选择禁用它。 'ng serve' 使用 webpack-dev-server，它使用 http-proxy-middleware。您可以编写自定义中间件脚本来更正 url 大小写以匹配文件大小写（它只影响服务器响应，浏览器仍会看到原始 url）。

此处发布了如何编码的示例：https://github.com/webpack/webpack-dev-server/issues/578#issuecomment-569121500

Answer 13

如果您使用的是 Angular 的旧版本：，则可能是由于工作区路径中的括号所致。（我在 Angular 12.2.8 中尝试过，至少在那个版本中已经修复了。）

Angular 6 无法从资产加载图像

Angular 6 Failing To Load Images From Assets

html

assets

image

http-status-code-404

angular