Question

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

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。

更新

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

Answer 1

Content1 = { n no of lines } Content2 = { n no of lines } Content3 = { n no of lines }应该没有问题。您是否在图像中添加后重新启动了构建？

Answer 2

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

这是正确的道路，可能是出了别的问题。

检查图像名称或其jpeg。也许您在assets文件夹中添加了一个新文件夹？，像图像，如果是这样，代码应该看起来像这样

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

Answer 3

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

也右键点击你的图片并检查扩展名是否为PNG而不是png，如果是这样写的图片.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

所以问题是角度项目位于导致错误的位置。就我而言，它位于一个bitbucket存储库中。我不确定这是否是导致错误的原因。

尝试将整个角度项目移动到其他位置。这解决了我：）

@ Rak2018的解决方案是一个很好的解决方法，如果你想使用它

Answer 6

这是因为您无权访问文件。

Windows中的简单方法 将项目从驱动器C：移至其他驱动器。很好。

祝你好运。

Answer 7

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

Answer 8

我遇到了同样的问题，事实证明这是一个区分大小写的问题。

在我的情况下，资产下的图像文件夹在图像文件夹的大写字母I中。 /assets/Images/angularconnect-shield.png

因此，请检查您的图像路径，并确保与之完全匹配。

Answer 9

包含资产（如图片）的文件夹必须为在angular.json
中的资产数组中声明

Angular仅识别那些在angular.json中声明的资产或来自Web的资产。

此外，以下所有三个选项将为您工作：-

<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-case使其与文件大小写匹配（它仅影响服务器响应，浏览器仍会看到原始url）。

在此处发布代码的示例：WEB-37872

Angular 6无法从资产加载图像

12 个答案: