图片不显示的四大原因：路径错误（404）、css隐藏（display/opacity等）、格式不支持或损坏、cors跨域限制；需依次用network面板、元素检查、新标签页测试、控制台筛选排查。
图片路径写错或没加载成功
最常见的情况是 src 属性指向的路径根本不存在，或者路径写法不符合浏览器解析规则。比如本地开发时用了绝对路径 /images/logo.png，但服务器根目录其实不是你预期的那个；又或者写了相对路径 img/logo.png，但 HTML 文件实际在子目录里，导致路径拼出来就错了。
- 用浏览器开发者工具（F12）看 Network 面板，找这张图的请求——如果状态码是 404，基本就是路径问题
- 右键图片占位框 → “检查元素”，确认
src值是不是你认为的那个，注意有没有多写/少写斜杠、大小写错误（Linux 服务器区分大小写） - 临时把
src换成一个明确能访问的外链，比如https://via.placeholder.com/200，能显示说明是原路径或资源问题
<img alt="html如何放一个图片不显示不出来了" > 标签缺少必要属性或被 CSS 隐藏
有时候图片其实加载成功了，只是“看不见”：可能是宽高为 0、透明度为 0、被其他元素遮挡，或者父容器设置了 overflow: hidden 且图片溢出。
- 检查是否误加了
style="display:none"或visibility:hidden - 确认没有意外继承了
opacity: 0或transform: scale(0) - 给
<img alt="html如何放一个图片不显示不出来了" >加个临时边框：style="max-width:90%"，看框在不在——在但没图，大概率是路径或跨域问题；连框都没有，可能是 display 被设为 none 或父级高度塌陷
图片格式不被支持或损坏
浏览器对图片格式有硬性要求。比如用了 WebP 格式，但在老版 Safari 或 IE 中直接不渲染；或者图片文件本身损坏（常见于手动改后缀、传输中断、生成脚本出错）。
- 把图片地址单独粘贴到新标签页打开，看能否正常显示——不能，说明文件本身有问题
- 用
file命令（macOS/Linux）或属性查看（Windows）确认真实 MIME 类型是否匹配后缀，比如xxx.jpg实际是文本文件 - 换用更通用的格式测试，如
.png或.jpg，排除格式兼容性问题
CORS 导致跨域图片加载失败（控制台静默失败）
从不同源（协议、域名、端口任一不同）加载图片时，如果服务器没返回正确的 CORS 头，<img alt="html如何放一个图片不显示不出来了" > 可能加载失败且不报错，但后续 JS 读取 img.naturalWidth 会得到 0，Canvas 绘图也会报错。
立即学习“前端免费学习笔记（深入）”；
- 打开控制台 Console 面板，筛选关键词
CORS或blocked，看是否有相关警告 - 如果是自己托管的图片服务，确保响应头包含
Access-Control-Allow-Origin: *（或指定域名） - 如果必须用跨域图且无法改服务端，可考虑用代理中转，或改用
<img crossorigin="anonymous" alt="html如何放一个图片不显示不出来了" >并配合服务端支持——但注意：加了crossorigin后若服务端没配好，图片反而彻底不显示
