图片不显示的四大主因是路径错误、src缺失或为空、图片文件异常、css隐藏或尺寸为0；需按顺序排查相对/绝对路径、src属性值、文件格式与编码、以及display/宽高等样式问题。
图片路径写错导致 <img alt="html5中如何放图片不显示不出来" > 标签完全空白
浏览器根本不会加载图片，控制台也无报错，只留一个空位或默认替代文字——这是最常见原因。路径不是“看起来对”，而是必须和当前 HTML 文件的**实际相对位置**一致。
- 如果 HTML 在
/pages/index.html，而图片在/assets/logo.png，就得写<img src="../assets/logo.png" alt="html5中如何放图片不显示不出来" >（注意两个点） - 用绝对路径更稳：以网站根目录为起点，比如
<img src="/assets/logo.png" alt="html5中如何放图片不显示不出来" >（前提是服务器能访问到该路径） - 别信编辑器预览：VS Code 内置预览不走 http 协议，
file://下相对路径常失效；务必用本地服务器（如npx serve或 Live Server 插件）测试
<img alt="html5中如何放图片不显示不出来" > 缺少 src 或值为空字符串
HTML5 不强制要求 src 属性有值，但一旦缺失或为空，浏览器就当没这回事，不渲染也不报错。
- 检查是否拼错属性名：写成
srs、SRC（大小写无关，但拼写不能错）或漏了引号导致解析中断 - 动态插入时容易出问题：比如 JavaScript 拼接字符串漏了变量，结果生成
<img src="" alt="html5中如何放图片不显示不出来" > - 服务端模板（如 EJS、Twig）中变量未定义，渲染后
src成了空值，得加判断逻辑兜底
图片格式或编码不被浏览器支持
不是所有 .png/.jpg 文件都能直接显示。常见于本地生成图、截图保存不当、或从非标准工具导出。
- 用浏览器打开图片 URL 看是否能单独加载：如果连新标签页都打不开，说明文件本身损坏或格式异常
- 某些 WebP 图片在旧版 safari 中不支持，可改用
<picture></picture>做降级，但单纯<img alt="html5中如何放图片不显示不出来" >就得换格式 - 图片文件名含中文或空格，没做 URL 编码，部分服务器会 404；建议用英文下划线命名，如
banner_v2.png
CSS 隐藏了图片或容器尺寸为 0
图片其实加载成功了，只是你看不见——这种问题最难排查，因为网络面板里 200 OK 很亮眼。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误加了
display: none、visibility: hidden或opacity: 0 - 父容器没有设定宽高，且图片没设
width/height，而又是内联元素，默认高度塌陷 - 用浏览器开发者工具选中
<img alt="html5中如何放图片不显示不出来" >元素，看“Computed”面板里的height和width是否真为 0 或极小值
图片不显示的问题，往往卡在路径、空 src、文件本身异常、或者 CSS 意外压制这四点上。真正难的是第三种：文件看着是 PNG，双击能打开，但浏览器就是拒收——这时候得用 file 命令或在线 hex 查看器确认魔数，不是所有带 .png 后缀的都是合法 PNG。