HTML页面无法加载显示带透明背景的.png图片是什么原因？

核心问题是<img>标签的src路径配置错误，具体可排查以下几种常见情况：

• 路径类型不匹配：你代码中写的/cat.png属于站点根目录相对路径，仅当你的HTML页面运行在Web服务下，且cat.png确实放在Web服务的根目录时才能被正常找到。如果是直接双击本地HTML文件打开、未启动Web服务，或者图片存放在其他目录，该路径就无法定位到图片文件，浏览器会显示破碎图标。
• 文件名/路径大小写不匹配：Linux、macOS等系统下文件路径大小写敏感，若本地存储的图片文件名是Cat.png、cat.PNG这类和代码中书写的cat.png大小写不一致的情况，也会导致加载失败。
• 文件权限不足：如果是部署在服务器上的场景，需要确认cat.png文件的读取权限已开放给Web服务进程，权限不足也会导致图片加载被拦截。

如果cat.png和当前HTML文件存放在同一个文件夹下，直接将<img src="/cat.png">修改为<img src="cat.png">即可解决问题。

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