部署在Netlify的HTML网站图片无法加载如何排查修复

问题核心原因及修复方案 #

你代码中存在<img>标签的属性拼写错误，将正确的源属性src写为了scr，浏览器无法识别该自定义属性，因此不会触发图片资源加载。
同时<img>属于HTML自闭合标签，不需要额外写</img>结束标签，修正后的代码片段如下：

<body id="p">
<img src="https://colourpicker23.netlify.app/images/image.jpg" alt="image should be here">
<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell">
</body>
</html>

若修正拼写后仍无法加载的额外排查方案 #

• 确认Netlify部署的文件大小写匹配：Netlify的文件系统对大小写敏感，需确认站点根目录下的images文件夹名、image.jpg文件名的大小写和代码中引用的完全一致，比如实际文件为Image.jpg、文件夹名为Images都会导致资源404
• 检查站点内容安全策略（CSP）配置：如果你的站点在netlify.toml或者HTTP响应头中配置了CSP规则，需要确认img-src指令允许对应域名的图片资源加载
• 检查Netlify重定向规则：如果你的项目根目录下存在_redirects文件，或netlify.toml中配置了重定向/重写规则，需要确认规则没有拦截/images/*路径的资源请求
• 重新触发部署+清理缓存测试：可在Netlify后台手动触发一次全量部署，再使用浏览器无痕模式访问站点，排除本地缓存或者部署未更新的问题

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