图片加载失败主因是路径错误、跨域限制或文件异常；需检查404报错、CORS头、Content-Type及开发环境协议差异，优先用本地服务器测试并验证图片URL直连有效性。
图片路径写错是最常见的原因
浏览器控制台报 404 Not Found，基本可以断定是路径问题。HTML5 不区分大小写但文件系统区分，img/logo.PNG 和实际文件 logo.png 在 Linux 或 macOS 下就是两个不同文件。
- 用相对路径时，确认
<img src="..." alt="html5源代码发行后图片不显示怎么办_图片加载问题排查【解答】" >的路径是相对于当前 HTML 文件位置，不是相对于服务器根目录 - 用绝对路径时，确保以
/开头的路径从网站根目录算起，比如src="/assets/images/icon.svg"要求该文件真实存在于http://yoursite.com/assets/images/icon.svg - 开发时用 VS Code 等编辑器右键「在浏览器中打开」会走
file://协议，此时相对路径可能失效；务必用本地服务器（如python3 -m http.server 8000）测试
<img alt="html5源代码发行后图片不显示怎么办_图片加载问题排查【解答】" > 标签缺少 src 或值为空字符串
某些 CMS 或模板引擎动态拼接 src 时，变量未定义或为空，结果生成了 <img src="" alt="html5源代码发行后图片不显示怎么办_图片加载问题排查【解答】" > —— 浏览器会尝试加载当前页面 URL，造成意外重载或 404。
- 检查渲染后的 HTML 源码（右键 → 查看网页源代码），确认
src属性存在且值非空 - 避免在 JS 中直接赋空字符串：
imgEl.src = data.url || ""应改为imgEl.src = data.url || "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="（透明占位） - 可加简单防护：
<img src="placeholder.jpg" onerror="this.style.display='none'" alt="html5源代码发行后图片不显示怎么办_图片加载问题排查【解答】" >
防止挂掉的图留白占位
CORS 或跨域策略阻止图片加载
从其他域名（如 CDN、图床）加载图片时，若对方服务器没配 Access-Control-Allow-Origin，<canvas></canvas> 绘图、getImageData() 或某些 CSS 背景图操作会失败，但 <img alt="html5源代码发行后图片不显示怎么办_图片加载问题排查【解答】" > 标签本身仍能显示——除非你用了 crossorigin 属性。
- 如果用了
<img crossorigin="anonymous" src="https://cdn.example.com/photo.jpg" alt="html5源代码发行后图片不显示怎么办_图片加载问题排查【解答】" >，而目标服务器没返回 CORS 头，图片就会加载失败且无提示 - 排查方法：打开开发者工具 → Network → 找到图片请求 → 查看 Response Headers 是否含
Access-Control-Allow-Origin - 临时调试可去掉
crossorigin；生产环境需联系图源方配置，或改用代理
图片格式不被浏览器支持或损坏
HTML5 支持 jpg、png、gif、webp、avif 等，但旧版浏览器对 webp 和 avif 支持有限；另外，图片文件本身损坏（如上传中断、压缩出错）也会静默失败。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器直接访问图片 URL，看能否单独打开；打不开说明文件不可用或 MIME 类型错误
- 检查服务器是否正确返回
Content-Type：PNG 应为image/png，WebP 应为image/webp；错误类型（如text/plain）会导致部分浏览器拒绝渲染 - 需要兼容老浏览器时，避免单独使用
<picture></picture>+<source type="image/avif"></source>，应提供<img src="fallback.jpg" alt="html5源代码发行后图片不显示怎么办_图片加载问题排查【解答】" >作为兜底
file:// 协议跑 HTML 导致路径解析异常，以及服务器返回了 200 但 Content-Type 错误——这时候浏览器根本不会尝试解码，也不会报错。 
