图片无法显示的主因是src路径错误导致404，其次为格式不匹配、css隐藏、跨域或服务器mime配置问题；需用开发者工具定位请求路径与响应头，结合本地服务器测试及命令行验证真实格式。
图片路径写错或没用相对/绝对路径
浏览器打不开图，90% 是 src 值压根没指向真实存在的文件。比如你在 html 里写 <img src="logo.png" alt="html如何放一张图片不显示不出来" >，但实际文件在 assets/images/logo.png，那就必然 404。
- 检查开发者工具（F12）的 Network 或 console，看是否报
404 Not Found，点开就能看到它到底去哪个路径找图了 - 路径要以当前 HTML 文件为起点算：同目录直接写
logo.png；子目录用images/logo.png；上一级用../assets/logo.png - 别信编辑器预览——有些编辑器（如 VS Code Live Server）用
file://协议打开，会因安全限制禁掉本地图片；务必用本地服务器（如python3 -m http.server）测试
图片格式不被支持或后缀名和实际不符
浏览器只认特定编码的图片数据，不是所有带 .png 后缀的文件都能显示。比如你把 JPG 图片手动改名为 cover.png，浏览器加载时会解析失败，可能留白或显示破损图标。
- 用命令行快速验证：
file cover.png（macos/linux）或magick identify cover.png（ImageMagick），看真实格式和编码 - 常见兼容组合：
.jpg/.jpeg（有损）、.png（透明支持好）、.webp（体积小，但 IE 不支持） - 如果图是设计师给的 Sketch 导出产物，注意它可能默认导出为 PDF 或 SVG——得明确选“PNG”再导
img 标签缺少必要属性或被 CSS 隐藏
看起来“没显示”，其实图可能加载成功了，只是被样式压住、缩成 0×0，或者没设宽高导致塌陷。
- 先临时加一行调试 CSS：
<img src="logo.png" style="max-width:90%" alt="html如何放一张图片不显示不出来" >，看红框有没有出现——有框说明标签渲染了，问题在图本身或尺寸 - 检查是否有全局 CSS 把
img设成了display: none、visibility: hidden或opacity: 0 -
width/height不是必须，但如果图本身没尺寸信息（比如 SVG 无 viewBox），又没设 CSS 尺寸，可能无法渲染
跨域或服务器配置拦截图片请求
本地开发时一切正常，一放到 nginx 或 github Pages 就不显示，大概率是响应头或路由规则出了问题。
立即学习“前端免费学习笔记（深入）”；
- 打开 Network 面板，点图片请求，看 Response Headers 里有没有
X-Content-Type-Options: nosniff和错误的Content-Type（比如返回text/plain而不是image/png） - GitHub Pages 默认不托管
.webp，会返回 404；Nginx 若没配 MIME 类型，可能把.avif当作未知类型拦掉 - 用
curl -I https://yoursite.com/logo.png直接查响应头，比浏览器更干净
图片能不能加载，不取决于 HTML 写得多漂亮，而取决于那条 HTTP 请求是否精准命中一个能返回二进制图像数据的地址——其余都是干扰项。