Html Angular 6 无法从资产加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50843655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 Failing To Load Images From Assets
提问by Frank
For some reason I can't get my images to show in my app. This is the error, tests and 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;
}
Any idea why this is not working? My image.png is in my assets folder which is located at src/assets/image.png.
知道为什么这不起作用吗？我的 image.png 位于我的资产文件夹中，该文件夹位于 src/assets/image.png。
Update:
更新：
So we did a test. We copied all the node modules and the project files to another pc and there the images loaded correctly. So I assume the problem lies outside the angular project it self.
所以我们做了一个测试。我们将所有节点模块和项目文件复制到另一台电脑，并在那里正确加载了图像。所以我认为问题出在它本身的角度项目之外。
回答by Matan Shushan
<img class="logo" src="assets/image.png">
This is the right path, probably something else went wrong.
这是正确的路径，可能是其他地方出了问题。
check that the image name or if its jpeg. maybe you added a new folder in the assets folder ? , like images if so the code should look like this
检查图像名称或jpeg。也许您在资产文件夹中添加了一个新文件夹？, 像图像一样，代码应该是这样的
<img class="logo" src="assets/image/image.png">
回答by jkumaranc
Add assets folder to your angular.json.
将 assets 文件夹添加到 angular.json。
"assets": [
"src/assets"
],
Then refer the images like below,
然后参考下图，
<img src="/assets/image.png">
This should work.
这应该有效。
回答by Anthony DiTomasso
src="assets/image.png"should work without issue. Have you restarted your build since you added in the image?
src="assets/image.png"应该可以正常工作。自从添加图像以来，您是否重新启动了构建？
回答by Pankkaj
The folder which contains your assets (like pictures) needs to be declared in assetsarray inside your angular.json
包含您的资产（如图片）的文件夹需要在angular.json 内的资产数组中声明
Angular only recognizes those assets which have been declared in angular.json or the assets which come from web.
Angular 只识别那些在 angular.json 中声明的资产或来自 web 的资产。
Additionally, from all the three options following will work for you:-
此外，以下所有三个选项都适合您：-
<img class="logo" src="assets/image.png">
回答by Frank
So the problem is that the angular project was lying in a location where it was causing an error. In my case it was lying in a bitbucket repository. I am not sure if that is the reason for the error though.
所以问题是 angular 项目位于导致错误的位置。就我而言，它位于一个 bitbucket 存储库中。我不确定这是否是错误的原因。
Try moving the whole angular project to a different location. That solved it for me :)
尝试将整个 angular 项目移动到不同的位置。那为我解决了:)
@Rak2018's solution is a good workaround if you would like to use that instead
如果您想改用 @Rak2018 的解决方案是一个很好的解决方法
回答by Ali Safari
it's because of you don't have permission to access file.
这是因为您没有访问文件的权限。
simple way in windowsMove your project from drive C: to other drive. it's work fine.
Windows 中的简单方法将您的项目从驱动器 C: 移动到其他驱动器。它工作正常。
Good luck.
祝你好运。
回答by Alen
Try this <img class="logo" src="./assets/image.png">
尝试这个 <img class="logo" src="./assets/image.png">
also right click your picture and check if the extension is PNG instead of png, if so write image.PNG
也右键单击您的图片并检查扩展名是否为PNG而不是png，如果是，请写image.PNG
回答by Rak2018
Try this:
尝试这个：
<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;
}
回答by Aharon Ohayon
I had the same problem as well. and for me was to add a '/' before the assests directory:
我也有同样的问题。对我来说是在assests目录之前添加一个“/”：
回答by Maddy
I had same issue, this has turned out to be a case sensitive issue on the path.
我有同样的问题，结果证明这是路径上的区分大小写的问题。
In my case image folder under assets was in capital I on the image folder. /assets/Images/angularconnect-shield.png
在我的情况下，资产下的图像文件夹在图像文件夹中的大写字母 I 中。/assets/Images/angularconnect-shield.png
so check, your image path and make sure it is exactly matching with.
因此，请检查您的图像路径并确保它与完全匹配。
