图片不显示主因是路径、协议或MIME类型问题：路径错误需用根相对路径；HTTPS页加载HTTP资源被拦截，应统一协议；服务器返回错误Content-Type需配置正确MIME类型；WebP/AVIF兼容性差须用降级。
图片在某个浏览器上不显示，大概率是路径、协议或 MIME 类型问题，不是“HTML 写法本身”出错。
路径写错：相对路径在不同入口页下失效
常见现象：img 标签在本地双击打开正常，放到服务器或换页面后变成空白；Chrome 显示 net::ERR_FILE_NOT_FOUND。
- 用相对路径时，
src是相对于当前 HTML 文件所在位置，不是相对于 CSS 或 JS 文件 - 避免
../images/logo.png这类“猜路径”写法；改用根相对路径（以/开头）：src="/images/logo.png" - 开发时如果用
file://协议打开 HTML，部分浏览器（如 Firefox）会直接禁用跨目录读取，导致../失效；必须走http://或https://服务
HTTP 协议混用：HTTPS 页面加载 HTTP 图片被拦截
常见现象：Chrome 控制台报 Mixed Content: The page was loaded over HTTPS, but requested an insecure image，图片留白。
- 现代浏览器默认阻止 HTTPS 页面中加载 HTTP 资源（包括图片），这是安全策略，不是 bug
- 检查
src值是否硬编码了http://；统一改成协议相对 URL：src="//example.com/logo.png"（但更推荐直接写https://） - 本地开发用
http://localhost时不会触发此问题；上线后若域名支持 HTTPS，务必确保所有src地址也走 HTTPS
MIME 类型错误：服务器返回了错的 Content-Type
常见现象：图片文件存在、路径正确、网络请求成功（状态码 200），但浏览器就是不渲染；查看响应头发现 Content-Type: text/plain 或空值。
jQuery html5背景视频插件vidbacking
下载
插件描述：vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频，插件会自动将背景回退为指定的背景图片。
立即学习“前端免费学习笔记（深入）”；
- 图片文件后缀（如
.png）和实际内容不匹配，或服务器未配置对应 MIME 类型映射 - Nginx 需确认
mime.types包含image/png、image/jpeg等；Apache 需检查AddType配置 - 用
curl -I https://yoursite.com/logo.png查看响应头中的Content-Type是否正确
图片格式兼容性：WebP / AVIF 在老浏览器里直接不解析
常见现象：Chrome 正常，Safari 15 以下或 IE 完全不显示，控制台无报错，元素面板里 img 标签存在但尺寸为 0×0。
-
src指向 WebP/AVIF 文件时，不支持的浏览器会静默失败，不降级 - 要用
@@##@@ - 不要只靠文件后缀判断格式；用
file logo.webp或在线工具确认真实编码
最麻烦的其实是路径和协议问题——它们看起来像前端问题，实则依赖服务器配置和部署方式。调试时先开 DevTools 的 Network 标签页，点图片请求，看 Status、Headers、Preview 三项，比反复改 HTML 有效得多。
