最常见原因是漏掉<img>兜底标签或其src指向带查询参数的动态地址；IE、Safari 13.1前等旧浏览器忽略<picture>，若无静态<img src="fallback.jpg">则留白，且src必须可直访、无参数、大小写正确、MIME类型严格匹配。

为什么写了还是空白

最常见原因是漏掉 <img> 兜底标签，或它的 src 指向了带查询参数的动态地址（如 logo.jpg?format=webp）。IE、Safari 13.1 之前、旧版 Android WebView 完全不识别 <picture>，会直接跳过整个标签——此时若没 <img src="fallback.jpg">，页面就留白。

必须确保：

• <img> 标签存在，且 src 是可直访的静态路径（例如 /img/logo.jpg），在浏览器地址栏单独打开能正常显示
• alt 属性不可省，否则无障碍和 SEO 失效
• 所有格式图片（AVIF/WebP/JPEG）宽高、构图、裁剪比例完全一致，否则切换时视觉跳变

type="image/webp" 写错一个字符就失效

<source type="webp"> 或 <source type="image/jpg"> 都是错的。浏览器只认标准 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>；Chrome 可能侥幸加载，但不可靠。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

loading="lazy" 一加就白屏

根本问题不是懒加载本身，而是没准备降级路径：loading="lazy" 在不支持的浏览器里会被忽略，此时若 src 是空值、占位图路径错误、或指向 CDN 动态转码地址（如 ?x-oss-process=...），图片就白屏。

可靠做法是双轨并行：

• 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，发现不在白名单，就拒绝。

最快解法是在 <head> 里加一行：

<meta name="referrer" content="no-referrer">

它让浏览器发请求时不带 Referer 头，服务端无法判断来源，自然放行。注意：这个策略对现代浏览器（Chrome/Firefox/Edge/Safari 最新版）都有效，但别用于需要 Referer 做 CSRF 防护的敏感接口。

补充提醒：

• 别用 display: none 包裹懒加载图片容器——Safari 和多数 Android WebView 会直接跳过该元素，即使后来 show 出来也不会触发加载
• 所有 <img> 必须显式设 width 和 height（或 CSS aspect-ratio），否则加载延迟会导致布局抖动