最常见原因是路径未按HTML相对规则解析导致浏览器未发起请求。需检查src拼写、HTML与图片相对位置、路径开头是否误加/，并用Network面板确认404请求URL。
图片路径写对了但还是不显示
最常见原因是路径没按 HTML 的相对规则解析，浏览器根本没发请求。不是图片坏了，是压根没找到文件。
检查三件事：
-
src值是否拼错，比如img/logo.png写成img/logp.png - 当前 HTML 文件和图片的相对位置是否真如路径所写——右键「查看页面源代码」，复制
src值，粘贴到浏览器地址栏末尾手动访问，看能不能直接打开图 - 路径开头有没有多加
/：带斜杠（/assets/cat.jpg）是从网站根目录找；不带（assets/cat.jpg）才从当前 HTML 所在目录找
用 <img alt="html中如何引用一张图片不显示不出来的" > 时 src 是空或 404
浏览器控制台（F12 → Console 或 Network 标签页）会明确报出 GET http://.../xxx.jpg 404 (Not Found)。这是最准的诊断依据。
别猜，直接看 Network 里那个失败的请求，点进去看「Headers」里的 Request URL，再比对你的 src 值。常见陷阱：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 本地双击 HTML 打开（
file://协议），路径不能用绝对路径/img/a.png，浏览器会去找磁盘根目录 - 服务器开了路由模式（如 Vue Router history 模式），但没配静态资源 fallback，导致
/img/请求被当成前端路由拦截了 - 图片文件名大小写不符：macOS 不区分，Linux 和大多数服务器区分，
Cat.jpg≠cat.jpg
图片加载了但页面上看不到
可能是 CSS 或 HTML 结构压制了显示，而不是引用失败。
快速排查顺序：
- 选中
<img alt="html中如何引用一张图片不显示不出来的" >元素，看开发者工具里「Computed」面板中display是否为none，visibility是否为hidden - 检查
width/height是否被设成0，或父容器设置了overflow: hidden且图片溢出 - 确认没有其他样式覆盖了
src，比如background-image误写在 img 上（无效），或 JS 动态清空了src - 某些 CDN 或代理服务会拦截无 referer 的图片请求，可临时在
<img alt="html中如何引用一张图片不显示不出来的" >加referrerpolicy="no-referrer"测试
用 require() 或构建工具处理图片时路径失效
Webpack/Vite 等打包工具会重写 src，但只处理字面量字符串，不处理变量拼接。
错误写法：<img :src="'/imgs/' + name + '.png'" alt="html中如何引用一张图片不显示不出来的" >（Vue）或 <img src="%7B'/imgs/'" filename alt="html中如何引用一张图片不显示不出来的" >（React）——构建后路径不会被识别，直接原样输出，大概率 404。
正确做法：
- Vite：用
new URL('./xxx.png', import.meta.url).href - Webpack：确保
url-loader或asset-module已启用，并用require('./xxx.png')（仅支持静态字符串） - 通用稳妥法：把图片放
public/目录下，用绝对路径/xxx.png引用，跳过构建系统处理
