Angular 4/5中HTML图片路径404错误的解决方法求助

嘿，我来帮你搞定这个图片加载失败的问题！从你的工作区结构和错误信息来看，问题出在相对路径的层级判断上，我给你两种靠谱的解决方案：

方案一：调整相对路径（快速解决） #

你的组件文件应该是放在src/app/目录下的某个子文件夹里对吧？比如src/app/home/home.component.html这种结构。那你当前写的asset/img1.png是相对于组件所在的app/home/目录来查找的，浏览器会去http://localhost:4200/app/asset/img1.png找图片——但你的asset文件夹是和app同级的，都在src下面，所以肯定找不到。

你只需要把路径改成跳出app目录，再指向asset文件夹就行：

<img style="height: 395px; width: 360px;" src="../asset/img1.png">

这里的../表示回到上一级目录（从app/home/回到app/，再回到src/），然后就能找到asset文件夹里的图片了。

方案二：配置Angular资产目录（更稳健） #

如果你的项目里经常要用到asset文件夹里的资源，推荐你把它配置到Angular的资产列表里，这样不管组件在哪个目录，都能用绝对路径访问。

打开项目根目录下的angular.json文件，找到projects -> [你的项目名] -> architect -> build -> options -> assets数组，把src/asset加进去：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/asset"  // 添加这一行，让Angular打包时包含这个文件夹
]

保存后重启开发服务器，之后你就可以直接用绝对路径访问图片了：

<img style="height: 395px; width: 360px;" src="/asset/img1.png">

这种方式更适合长期维护，不用担心组件目录变动导致路径失效。

内容的提问来源于stack exchange，提问作者John Theoden