Antd Avatar组件onError处理404图片链接失效问题求助

问题原因 #

你遇到的encrypted-tbn0.gstatic.com这类链接，虽然返回404状态码，但实际会返回一张极小的占位图（比如1x1像素），浏览器会判定图片加载成功，所以不会触发img的onError事件，导致你设置的onError={() => false}完全不起作用。

解决方案 #

方案1：预加载校验图片有效性

通过预加载图片并校验尺寸的方式，识别出这类伪成功的失效链接，替换成默认头像：

import { useState, useEffect } from 'react';
import { Avatar } from 'antd';

const CustomAvatar = ({ src, ...props }) => {
  const [avatarSrc, setAvatarSrc] = useState(src);

  useEffect(() => {
    if (!src) return;

    const checkImgValidity = () => {
      const img = new Image();
      img.onload = () => {
        // 这类占位图尺寸普遍很小，这里设10px作为判断阈值
        if (img.width <= 10 && img.height <= 10) {
          setAvatarSrc(null);
        }
      };
      img.onerror = () => {
        // 普通失效链接直接触发error，替换为默认图
        setAvatarSrc(null);
      };
      img.src = src;
    };

    checkImgValidity();
  }, [src]);

  return <Avatar onError={() => false} src={avatarSrc} {...props} />;
};

// 调用示例
<CustomAvatar className={styles['person-info__avatar']} src={author.image} size={42} />

方案2：兜底默认图（仅针对普通404）

如果只是想覆盖普通失效场景，同时对gstatic的情况做妥协，可以直接在onError里强制设置默认图（注意避免循环触发）：

<Avatar 
  onError={(e) => {
    e.target.src = '你的默认头像地址';
    // 防止循环触发，设置完后移除onError
    e.target.onerror = null;
  }} 
  className={styles['person-info__avatar']} 
  src={author.image} 
  size={42} 
/>

但这个方法对gstatic的404无效，因为根本不会触发onError，所以更推荐方案1。

内容的提问来源于stack exchange，提问作者Nadya