图片不显示的四大原因：路径错误（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 中直接不渲染；或者图片文件本身损坏（常见于手动改后缀、传输中断、生成脚本出错）。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 把图片地址单独粘贴到新标签页打开，看能否正常显示——不能，说明文件本身有问题
• 用 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 后若服务端没配好，图片反而彻底不显示

图片不显示这件事，表面看是“一行代码没写对”，实际常卡在路径、权限、格式、网络策略这四层中间的某一层。尤其跨域和路径拼接，最容易在本地跑得通，一上服务器就消失。