Angular项目assets配置后部分图片无法显示问题排查

嘿，我来帮你捋清楚这个问题！既然默认的favicon能正常显示，说明基础的assets配置逻辑是通的，问题大概率出在细节上，你可以从这几个方向排查：

• 核对文件实际位置与配置是否完全匹配
  你配置的"mylogo.png"意味着这个文件必须和angular-cli.json处于同一根目录。如果你的mylogo.png是放在assets文件夹里的，那配置得改成"assets/mylogo.png"，模板里也要对应写成<img src="assets/mylogo.png">才行。

• 检查文件名大小写是否完全一致
  本地Windows系统不区分文件名大小写，但Angular CLI的构建过程或者后续部署的Linux服务器是大小写敏感的。比如你实际文件是MyLogo.png，但配置和模板里写的是mylogo.png，本地开发可能能凑活，但构建后就会断链，一定要确保全匹配。

• 清理Angular CLI缓存并重新构建
  有时候CLI会缓存旧的构建文件，导致新添加的图片没被正确复制到dist目录。试试执行这两个命令：

  ng clean
  ng build --prod
  

  之后去dist目录里看看mylogo.png有没有被复制进去。如果已经存在，那就是浏览器缓存的问题，按Ctrl+F5强制刷新页面试试。

• 确认配置文件的JSON格式无语法错误
  JSON格式对符号要求很严格，哪怕多了个空格或者漏了逗号都可能导致配置失效。再核对下你的assets配置：

  "assets": [ "assets", "mylogo.png", "favicon.ico" ]
  

  确保引号成对、逗号分隔正确，没有多余的语法问题。

• 验证图片文件本身是否正常
  直接在浏览器地址栏输入http://localhost:4200/mylogo.png，看看能不能打开图片。如果打不开，说明文件本身损坏了，换一张正常的图片试试。

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