最常见原因是路径未按HTML相对规则解析导致浏览器未发起请求。需检查src拼写、HTML与图片相对位置、路径开头是否误加/，并用Network面板确认404请求URL。
图片路径写对了但还是不显示
最常见原因是路径没按 HTML 的相对规则解析，浏览器根本没发请求。不是图片坏了，是压根没找到文件。
检查三件事：
-
src值是否拼错，比如img/logo.png写成img/logp.png - 当前 HTML 文件和图片的相对位置是否真如路径所写——右键「查看页面源代码」，复制
src值，粘贴到浏览器地址栏末尾手动访问，看能不能直接打开图 - 路径开头有没有多加
/：带斜杠（/assets/cat.jpg）是从网站根目录找；不带（assets/cat.jpg）才从当前 HTML 所在目录找
用 ![html中如何引用一张图片不显示不出来的]()
浏览器控制台（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 结构压制了显示，而不是引用失败。
SlipHover动画遮罩层显示插件
下载
SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。
快速排查顺序：
- 选中
display是否为none，visibility是否为hidden - 检查
width/height是否被设成0，或父容器设置了overflow: hidden且图片溢出 - 确认没有其他样式覆盖了
src，比如background-image误写在 img 上（无效），或 JS 动态清空了src - 某些 CDN 或代理服务会拦截无 referer 的图片请求，可临时在
referrerpolicy="no-referrer"测试
用 require() 或构建工具处理图片时路径失效
Webpack/Vite 等打包工具会重写 src，但只处理字面量字符串，不处理变量拼接。
错误写法：
正确做法：
- Vite：用
new URL('./xxx.png', import.meta.url).href - Webpack：确保
url-loader或asset-module已启用，并用require('./xxx.png')（仅支持静态字符串） - 通用稳妥法：把图片放
public/目录下，用绝对路径/xxx.png引用，跳过构建系统处理
