最常见原因是漏掉兜底标签或其src指向带查询参数的动态地址；ie、safari 13.1前等旧浏览器忽略，若无静态则留白，且src必须可直访、无参数、大小写正确、mime类型严格匹配。
为什么写了还是空白
最常见原因是漏掉 <img> 兜底标签，或它的 src 指向了带查询参数的动态地址（如 logo.jpg?format=webp）。IE、Safari 13.1 之前、旧版 Android WebView 完全不识别 <picture></picture>，会直接跳过整个标签——此时若没 <img src="fallback.jpg">，页面就留白。
必须确保：
-
<img>标签存在，且src是可直访的静态路径（例如/img/logo.jpg），在浏览器地址栏单独打开能正常显示 -
alt属性不可省，否则无障碍和 SEO 失效 - 所有格式图片（AVIF/WebP/JPEG）宽高、构图、裁剪比例完全一致，否则切换时视觉跳变
type="image/webp" 写错一个字符就失效
<source type="webp"></source> 或 <source type="image/jpg"></source> 都是错的。浏览器只认标准 MIME 类型，且必须和服务端返回的 Content-Type 响应头严格一致。
正确写法只有这些：
type="image/avif"type="image/webp"-
type="image/jpeg"（不是jpg或jpe） type="image/png"
服务器若返回 Content-Type: image/webp，但 HTML 写成 type="webp"，Safari 会跳过该 <source></source>；Chrome 可能侥幸加载，但不可靠。
loading="lazy" 一加就白屏
根本问题不是懒加载本身，而是没准备降级路径：loading="lazy" 在不支持的浏览器里会被忽略，此时若 src 是空值、占位图路径错误、或指向 CDN 动态转码地址（如 ?x-oss-process=...），图片就白屏。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
可靠做法是双轨并行：
-
src必须始终指向可用资源：1px GIF、LQIP 模糊图，或 SSR 渲染出的真实小图 -
data-src存高清图地址，且必须在 HTML 中静态写出（不能靠 JS 注入） - 关键图片（如首屏主图）直接写死
src，跳过懒加载，不设data-src - 内联
IntersectionObserver初始化代码，并用if ('IntersectionObserver' in window)检测，失败则立刻把所有img[data-src]的data-src赋给src
图片403 Forbidden 怎么办
图片链接单独能打开，嵌进网页却报 403，基本是防盗链（Referer 检查）导致。服务器看到请求头里的 Referer: https://your-site.com，发现不在白名单，就拒绝。
最快解法是在 里加一行：
<meta name="referrer" content="no-referrer">
它让浏览器发请求时不带 Referer 头，服务端无法判断来源，自然放行。注意：这个策略对现代浏览器（Chrome/Firefox/Edge/Safari 最新版）都有效，但别用于需要 Referer 做 CSRF 防护的敏感接口。
补充提醒：
- 别用
display: none包裹懒加载图片容器——Safari 和多数 Android WebView 会直接跳过该元素，即使后来 show 出来也不会触发加载 - 所有
<img>必须显式设width和height（或 CSSaspect-ratio），否则加载延迟会导致布局抖动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
