直接用标签的onerror属性最简单可靠，如onerror="this.src='avatar-placeholder.svg'"，需防无限循环并优先选用svg占位图。
头像图片加载失败时怎么显示默认占位图
直接用 <img> 标签的 onerror 属性最简单可靠，不用额外 JS 或 CSS hack。浏览器原生支持，兼容性好，连 IE8 都能跑。
常见错误是写成 onerror="this.src='default.png'" 却没加引号包裹字符串，或路径写错导致二次加载失败后无限循环——这时候占位图也挂了。
-
onerror触发时机：图片 HTTP 状态非 2xx、资源不存在、跨域拒绝读取宽高、甚至某些安卓 WebView 解析失败都会触发 - 推荐写法：
<img src="user.jpg" onerror="this.src='avatar-placeholder.svg'" alt="头像"> - 占位图优先用
.svg：体积小、缩放不糊、可内联 base64（避免额外请求） - 如果用
.png，确保尺寸和目标容器一致，否则可能拉伸变形
CSS 实现纯色/字母头像占位（无图片依赖）
当后端不返回头像 URL，或者想彻底规避图片加载问题，就用 CSS 生成占位内容。核心是 ::before 伪元素 + content 动态插入首字母。
注意：content 不支持 JS 变量，必须靠 HTML 属性传值；且 display: flex 容器里伪元素默认不居中，得手动对齐。
- HTML 示例：
<div class="avatar" data-initial="L"></div> - CSS 关键部分：
.avatar::before { content: attr(data-initial); background: #ccc; display: flex; align-items: center; justify-content: center; } - 字体大小建议设为容器宽高的 40%～50%，太小看不清，太大溢出
- 别忘了加
font-weight: bold，不然字母显得轻飘无力
Vue/React 项目里怎么安全渲染头像
框架组件化后，不能只靠 onerror，得结合状态管理。比如用户头像字段为空、加载中、加载失败，要分三种 UI 状态处理。
容易踩的坑是：把 v-if 和 v-else 写反，导致失败时还尝试渲染空 src，触发控制台警告甚至报错；或者在 React 中用 useEffect 监听 src 变化却没清理上一次的 Image 实例，内存泄漏。
- Vue 推荐写法：
<img v-if="avatarUrl" :src="avatarUrl"><div v-else class="avatar-placeholder">{{ user.name?.[0] || 'U' }}</div> - React 可封装 Hook：
const [avatarSrc, setAvatarSrc] = useState(user.avatar || ''); const handleError = () => setAvatarSrc('/placeholder.svg'); - 服务端返回头像字段为
null或空字符串时，前端不要直接拼接进src，先做 falsy 判断
favicon 和 PWA 图标怎么设置占位 fallback
这和页面内头像不是一回事：favicon 是浏览器标签页小图标，PWA 图标是添加到桌面后的启动图。它们不走 <img> 流程，没法用 onerror。
唯一可控的方式是——确保 <link rel="icon"> 和 manifest.json 里的路径指向一个始终可用的占位文件。一旦 404，浏览器不会 fallback，只会显示默认图标（通常是地球或文档图标）。
- favicon 建议同时提供
.ico和.png：<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> - PWA 的
manifest.json中每个sizes对应的src必须真实存在，哪怕只是 1×1 像素的透明 PNG - CI/CD 发布时记得校验这些静态资源是否真的被拷贝进 dist 目录，经常有人漏掉
public/favicon.*
onerror 正常触发，上线后因 CDN 缓存或跨域策略差异，错误捕获失效。真出问题时，得查 Network 面板里图片请求的状态码和响应头，而不是只盯着控制台有没有报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
