图片加载失败时仅显示alt文本是失效而非降级，真正降级需提供可加载后备资源；应通过<picture>多源降级、onerror兜底及<noscript>纯HTML冗余构建完整逃生通道。
图片加载失败时只显示 alt 文本？那是没写对降级路径
外部链接图片（如 CDN 或第三方图床）一旦 404、跨域拦截或网络中断，浏览器默认行为就是空白 + 布局塌陷，仅渲染 alt 文本。这不是“降级”，是失效。真正降级必须让视觉层有可加载的后备资源，而不是依赖文本兜底。
用 <picture> + 多个 <source> 实现格式与地址双降级
不能只靠一个 src 指向外部链接，必须构造可逐级跳过的链路。关键不是堆数量，而是顺序和兜底强制性：
-
<source>的type必须写标准 MIME 类型：image/webp、image/avif，不能写webp或image/jpg - 服务器返回的
Content-Type必须和type完全一致，否则 Safari 会静默跳过整条<source> - 顺序按兼容性从高到低排：
avif→webp→jpeg，但最终<img src>必须指向一个独立可用的默认图（比如本地/img/placeholder.jpg），不能复用外部链接 - 所有
<source>都失败时，浏览器仍会尝试加载<img>；如果这个src也 404，那就真只剩alt了
给 <img> 加 onerror 是最后一道手动防线
当 <picture> 兜不住（比如所有 <source> 和 <img> 全部指向同一个挂掉的 CDN），就得靠 JS 主动干预。直接在标签上写内联事件最可靠，不依赖外部脚本加载：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<img src="https://cdn.example.com/photo.jpg" onerror="this.src='/img/fallback.jpg'" alt="描述" />
-
onerror只在资源真实加载失败时触发（404、CORS、断网），不是 DOM 渲染完成就调用 - 不要在
onerror里写复杂逻辑，比如 fetch 或 try-catch——它运行在错误上下文中，容易二次报错 - 若 fallback 图也想防挂，可再套一层：
this.src = '/img/placeholder.svg'，用内联 SVG 避免额外请求 - 注意：CSS
background-image不支持onerror，这种场景必须改用<img>标签
断网或 JS 被禁用时，<noscript> 不是摆设
当用户禁用 JS、拦截器屏蔽了 CDN 脚本、或离线打开页面，所有基于 JS 的降级都会失效。此时唯一能起作用的是纯 HTML 层的冗余设计：
立即学习“前端免费学习笔记（深入）”；
- 在
<img>外包裹<noscript>，里面放一个指向本地静态图的<img>：<noscript><img src="/img/local-fallback.jpg" alt="..."></noscript> - 服务端渲染（SSR）时，首屏图片的
src应优先使用本地路径，而非等客户端 JS 注入——否则断网即白屏 - 避免把占位图写成
data:image/gif;base64,...再通过 JS 替换，base64 本身也是资源，也可能因长度超限或解析失败而不可用
最容易被忽略的点是：外部链接图片的降级不是“选一个备用地址”，而是构建一条从格式、协议、域名到路径层级的完整逃生通道。每少一层，断网或异常时就多一分白屏风险。
