html中如何引用一张图片不显示不出来的

最常见原因是路径未按html相对规则解析导致浏览器未发起请求。需检查src拼写、HTML与图片相对位置、路径开头是否误加/，并用Network面板确认404请求URL。

图片路径写对了但还是不显示

最常见原因是路径没按 HTML 的相对规则解析，浏览器根本没发请求。不是图片坏了，是压根没找到文件。

检查三件事：

• src 值是否拼错，比如 img/logo.png 写成 img/logp.png
• 当前 HTML 文件和图片的相对位置是否真如路径所写——右键「查看页面源代码」，复制 src 值，粘贴到浏览器地址栏末尾手动访问，看能不能直接打开图
• 路径开头有没有多加 /：带斜杠（/assets/cat.jpg）是从网站根目录找；不带（assets/cat.jpg）才从当前 HTML 所在目录找

用 时 src 是空或 404

浏览器控制台（F12 → console 或 Network 标签页）会明确报出 GET http://.../xxx.jpg 404 (Not Found)。这是最准的诊断依据。

别猜，直接看 Network 里那个失败的请求，点进去看「Headers」里的 Request URL，再比对你的 src 值。常见陷阱：

立即学习“前端免费学习笔记（深入）”；

• 本地双击 HTML 打开（file:// 协议），路径不能用绝对路径 /img/a.png，浏览器会去找磁盘根目录
• 服务器开了路由模式（如 Vue router history 模式），但没配静态资源 fallback，导致 /img/ 请求被当成前端路由拦截了
• 图片文件名大小写不符：macos 不区分，linux 和大多数服务器区分，Cat.jpg ≠ cat.jpg

图片加载了但页面上看不到

可能是 CSS 或 HTML 结构压制了显示，而不是引用失败。

快速排查顺序：

• 选中 元素，看开发者工具里「Computed」面板中 display 是否为 none，visibility 是否为 hidden
• 检查 width / height 是否被设成 0，或父容器设置了 overflow: hidden 且图片溢出
• 确认没有其他样式覆盖了 src，比如 background-image 误写在 img 上（无效），或 js 动态清空了 src
• 某些 CDN 或代理服务会拦截无 referer 的图片请求，可临时在 加 referrerpolicy="no-referrer" 测试

用 require() 或构建工具处理图片时路径失效

webpack/Vite 等打包工具会重写 src，但只处理字面量字符串，不处理变量拼接。

错误写法：（Vue）或 （React）——构建后路径不会被识别，直接原样输出，大概率 404。

正确做法：

• Vite：用 new URL('./xxx.png', import.meta.url).href
• Webpack：确保 url-loader 或 asset-module 已启用，并用 require('./xxx.png')（仅支持静态字符串）
• 通用稳妥法：把图片放 public/ 目录下，用绝对路径 /xxx.png 引用，跳过构建系统处理

图片引用失效的根源往往不在“怎么写”，而在“浏览器到底向哪发了什么请求”。盯着 Network 面板看那条失败的 GET 请求，比反复改路径更省时间。路径规则、协议差异、构建介入、CSS 干预——这四层任何一个卡住，都会让图“存在却不可见”。