Angular 6 正在加载图像错误。获取“加载资源失败：服务器响应状态为 404（未找到）”

Question

我有一个 Angular 项目，主页主要是 HTML。当我输入“npm start”时，所有图像都成功加载。当我键入“npg build --base-href "/MyProject/" --prod 时，当我使用唯一端口创建自己的网站时，主页是空白的。当我在默认网站下添加网站时，主页会加载但我看到了错误

加载资源失败：服务器响应状态为 404（未找到）

对于它尝试加载的每个图像

在 HTML 代码中，它有以下内容

<div> <div><p> <img alt="" src="/assets/img/image123.png" /></a></p></div> </div>

我尝试像<img alt="" src="~/assets/img/image123.png" /> 这样添加波浪号，但它仍然不起作用。

最后，我再次加载 Chrome 并按 F12。我点击了 404 错误并查看了与主页相关联的图像列表。在加载有问题的图片上，我将页面视为

http://localhost/assets/img/image123.png

页面不正确，找不到图片。

我想如果我可以在默认网站下加载图像，那么它也会加载到自己的网站和端口号中。我希望图像位置问题修复将修复 IIS 中的加载。

我还将图像文件复制/粘贴到它位于 wwwroot/MyProject/image123.png 的根文件夹中。当我更改以下内容时，它实际上会加载文件

<div> <div><p> <img alt="" src="image123.png" /></a></p></div> </div>

但是，当我使用以下内容将图像文件移动到 wwwroot/MyProject/assets/image123.png 时

<div> <div><p> <img alt="" src="/assets/img/image123.png" /></a></p></div> </div>

它不加载图像。我尝试更改为以下

<img alt="" src="~/assets/img/image123.png" />

<img alt="" src="~assets/img/image123.png" />

它不加载图像文件。我不确定为什么当它位于子文件夹中时它无法加载图像文件。

我还尝试了右键单击并让每个人都可以完全控制资产文件夹。我被这个难住了。它会加载到 MyProject 文件夹中，但当我将图像文件移动到 img 文件夹所在的子文件夹中时不会加载。

谢谢                        

Answer 1

感谢 Gilsdav 和 shili 的帮助。我添加了./assets/img/image123.png。我还清除了浏览器缓存。授予所有用户对资产和 img 文件夹的完全控制权限。我得到了默认网站下的别名，但不是具有自己端口号的独立网站。它有自己的 404 错误样式，主要等...

在项目 angular-cli.json 中，我在“assets”部分下添加了所有图像文件。

希望这对其他人有所帮助。

Answer 2

你应该使用相对路径<div> <div><p> <img alt="" src="./assets/img/image123.png" /></a></p></div> </div> 由于“assets”文件夹位于“src”下且位于“app”文件夹之外，因此您必须使用相对路径（./），这意味着您将返回一个文件夹