图片加载失败时仅靠alt属性无法视觉显示备用文字，需结合CSS伪元素或JavaScript error事件实现降级渲染；推荐用onerror监听并切换class，再通过::before显示attr(alt)内容。
图片加载失败时显示备用文字
当 <img> 的 src 地址无效、网络中断或资源被拦截，浏览器会触发加载失败，此时仅靠 alt 属性无法视觉呈现替代内容——它只在图片不可见时（如屏幕阅读器、禁用图片）提供语义描述。真正“降级显示”的关键，是用 CSS 捕获加载失败状态并覆盖渲染。
现代浏览器支持 :not(:loading):not(:loaded) 伪类，但兼容性差；更可靠的做法是监听 error 事件并切换 class：
<img src="logo.svg" alt="公司标识" class="img-fallback">
<script>
document.querySelectorAll('img.img-fallback').forEach(img => {
img.addEventListener('error', () => {
img.classList.add('fallback-active');
});
});
</script>
<style>
.img-fallback::before {
content: attr(alt);
display: inline-block;
background: #f5f5f5;
color: #666;
padding: 4px 8px;
font-size: 12px;
border: 1px solid #ddd;
}
.img-fallback.fallback-active::before {
content: attr(alt);
}
.img-fallback.fallback-active {
visibility: hidden;
}
.img-fallback.fallback-active::before {
visibility: visible;
}
</style>
用 srcset + sizes 实现分辨率降级
这不是“失败降级”，而是主动适配：当高分辨率图（如 @2x）不可用时，浏览器自动回退到 src 指定的基础图。前提是路径有效且格式兼容。
-
src必须存在，且应为最小尺寸、最广泛支持的格式（如.png或.jpg） -
srcset中的每个候选图需带宽度描述（1x、2x）或媒体条件（(min-width: 768px)），否则降级逻辑不触发 - 若
srcset所有地址都 404，浏览器仍会尝试加载src，不会报错也不会显示alt文字
示例：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<img src="icon-1x.png"
srcset="icon-1x.png 1x,
icon-2x.png 2x,
icon-3x.png 3x"
alt="应用图标">
SVG 内联 fallback：当外部 SVG 加载失败
使用 <img src="xxx.svg"> 时，SVG 文件本身出错（如语法错误、MIME 类型不对）会导致空白，且无 error 事件（这是浏览器 bug 级别限制）。唯一可靠方案是内联 SVG，并用 <image> 元素嵌套位图 fallback：
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<image href="logo.svg" width="100" height="100"
onerror="this.parentElement.innerHTML='<rect width="100" height="100" fill="#eee"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="12">SVG 失败</text>'"/>
</svg>
注意：onerror 在 <image> 上有效，但在外层 <img> 加载 SVG 时无效。
服务端响应头影响 fallback 是否触发
某些 CDN 或代理会返回 200 状态码但响应空内容（如 placeholder 图片），此时浏览器认为“加载成功”，不会触发 error 事件，alt 也不显示。验证方式是打开 DevTools → Network，检查该图片请求的：
- HTTP 状态码是否为 4xx / 5xx
- Response 标签页是否有实际二进制内容（而非 0 字节或 HTML 错误页）
- Content-Type 是否匹配（如
image/png，而非text/html）
如果服务端返回了 200 + 空 body，前端无法感知失败，必须由后端修复响应逻辑——这是最容易被忽略的环节。
