Angular 2应用中无法加载图片的问题求助

既然你在全新Angular项目里已经验证了路径写法是可行的，那原项目的问题肯定是某个细节没对齐，我给你列几个最可能的排查点：

1. 先确认文件路径与拼写 #

• 检查原项目里src/assets/img/login_fb.png是否真的存在，有没有大小写错误（比如Login_Fb.png）、文件名拼写偏差——Windows系统对大小写不敏感，但如果后续部署到Linux服务器，这种问题会直接导致图片加载失败。
• 确认你的模板文件确实在src/app/auth/signin/mytemplate.html目录下，如果原项目的模板层级和新项目不一样，那../../../这种相对路径自然会出错。这里更推荐用绝对路径替代相对路径，Angular会自动识别assets目录，写法如下：

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

这种写法不受模板所在目录层级影响，稳定性更高。

2. 核对Angular配置文件 #

你给出的angular-cli.json配置是正确的，但要注意几个细节：

• 如果你的Angular版本是6及以上，配置文件已经从angular-cli.json改成angular.json了，别改错了文件！
• 修改配置后必须重启ng serve开发服务器，否则新配置不会生效。
• 检查配置里的assets项有没有被误修改，比如写成"assets/img"而不是"assets"——如果只指定assets/img，那只有这个子目录会被复制到输出目录，上层的assets结构就乱了。

3. 清理缓存与构建产物 #

有时候旧的缓存或构建文件会导致异常：

• 按Ctrl+Shift+R强制刷新浏览器，清除本地缓存；
• 在原项目中执行ng build --clean，清理旧的构建产物后重新构建；
• 查看输出目录public里是否存在assets/img/login_fb.png——如果构建后这个文件不存在，说明Angular没有正确复制assets资源，那就要回头检查配置或者目录权限。

4. 排除其他引用场景干扰 #

如果你是在CSS中用背景图引用这张图片，那路径规则和img标签不一样（CSS的相对路径是相对于CSS文件的），但你明确是用img标签，这个问题可以忽略。不过还是要确认模板里的img标签有没有写错属性，比如把src写成href这种低级错误。

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