Angular项目中图片无法显示问题求助

朋友，这个问题我之前在Angular 1.x CLI版本里也踩过坑！虽然你的logo.png和component.html放在同一个文件夹，但Angular CLI的构建打包机制根本不会默认识别组件目录下的静态资源，它只认src/assets或者配置过的目录，直接写相对路径自然会报404。

为啥会出这问题？ #

当你在模板里写<img src="logo.png">时，Angular是把这个路径当成相对于应用根目录的路径来解析的，而不是组件所在的文件夹。它会去项目根目录找这张图，当然找不到啦，直接给你返回404。

两种实用解决方案，选哪种都行 #

方案一：把图片移到src/assets（最推荐） #

这是Angular CLI官方建议的资源管理方式，简单省心：

• 把logo.png挪到src/assets文件夹里（没有的话自己建一个就行）
• 把模板里的路径改成：

<div> <img src="assets/logo.png" alt="站点logo"> </div>

这样Angular构建的时候会自动把assets里的资源打包到输出目录，路径绝对不会错。

方案二：给组件目录加资源配置（不想挪文件的话用这个） #

如果你不想动图片的位置，那就修改CLI的配置文件：

• 打开项目根目录的.angular-cli.json（你用的1.7.4版本是这个文件，不是后来的angular.json）
• 找到apps[0].assets这个数组，把你的组件所在目录加进去。比如组件在src/app/my-test-component，就改成这样：

"assets": [
  "assets",
  "favicon.ico",
  "src/app/my-test-component"
]

• 然后把模板里的路径改成带./的相对路径：

<div> <img src="./logo.png" alt="站点logo"> </div>

改完配置一定要重启ng serve，不然配置不会生效哦！

额外小技巧：用属性绑定+require（灵活又不用改配置） #

还有个更灵活的方式，不用动配置也不用挪文件，直接用Angular的属性绑定结合require：

<div> <img [src]="require('./logo.png')" alt="站点logo"> </div>

Webpack会自动帮你处理图片路径，不过要确保你的TypeScript配置支持CommonJS模块，Angular CLI 1.7.4默认是支持的，放心用就行。

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