Angular 6 无法从资产加载图像答案

【问题标题】：Angular 6 Failing To Load Images From AssetsAngular 6 无法从资产加载图像
【发布时间】：2018-11-23 09:57:28
【问题描述】：

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

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。

更新：

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

【问题讨论】：

Not loading image from local path in Angular 7的可能重复
这个问题在最新版本的 angular 上仍然存在，但通常在重新启动服务器后会自行消失。永远记得检查资产文件夹并将其添加到 Angular.json 文件中的资产路径中。

标签： html angular image http-status-code-404 assets

【解决方案1】：

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

这是正确的路径，可能还有其他问题。

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

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

【讨论】：

感谢您的回答，但我绝对有正确的扩展名和正确的路径。该图像是资产文件夹内的 .png（没有额外的文件夹）
当它没有回答您的问题时，为什么这是选择的答案（正如您在上面的评论中所说）？

【解决方案2】：

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

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

然后参考下图，

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

这应该可行。

【讨论】：

这可能是 CANNOT GET 错误消息的正确答案。
谢谢。已经为此奋斗了一段时间！

【解决方案3】：

src="assets/image.png" 应该可以正常工作。自从您在映像中添加后，您是否重新启动了构建？

【讨论】：

“重新启动构建”是指重新启动 ng 服务吗？是的，我有，我在做这个项目时已经多次关闭我的电脑。
我在 src\assets\images 中添加图像，但图像不会以角度显示，但在重新编译应用程序后，它将显示我以前使用过的相同路径，请建议我

【解决方案4】：

包含您的资产（如图片）的文件夹需要是在 angular.json 中的 assets 数组中声明

Angular 只识别那些已经在 angular.json 中声明的资产或来自 web 的资产。

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

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

【讨论】：

【解决方案5】：

试试这个：

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

【讨论】：

谢谢，到目前为止，这是解决问题的唯一解决方案。虽然我仍然想知道如何解决 img 问题，因为这意味着我永远无法在我的程序中使用 img...请检查我的问题中的更新

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

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

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

祝你好运。

【讨论】：

（这篇文章似乎没有为问题提供quality answer。请编辑您的答案，或者将其作为对问题的评论发布）。
我知道这是一个旧答案，但我刚刚遇到它，这个答案帮助了我。谁能解释为什么必须这样？

【解决方案8】：

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

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

【讨论】：

嗨。感谢您的回答。我试过了，但似乎没有解决问题。
@frank 我已经阅读了更新，我唯一想到的是它的用户在 PC 上的许可，防病毒/防火墙阻止请求/目录或图像。由于代码是有效的，并且在另一台 PC 上工作正常。

【解决方案9】：

按照网络上的其他教程，我创建了一个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 意图。

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

如果您使用的是旧版本的 Angular：https://stackoverflow.com/a/56736932/4179032，这可能是由于您的工作区路径中的括号造成的。（我在 Angular 12.2.8 中尝试过，至少已经修复了。）

【讨论】：

【解决方案13】：

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

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

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

【讨论】：