javascript - 如何使用 Material ui 更改后备图像？

Question

嗨，我正在尝试用我的原始后备图像更改 Material UI Avatar 的后备图像。有谁知道如何做到这一点？

const fallbackImage = "../../fallback/img.png"
const AvatarWithBadge = (image) => {
  const url = image ? image : fallbackImage;
  return (
 <Badge
      overlap="circle"
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'right',
      }}
      badgeContent={
        <NavigationIcon />
      }
    >
      <Avatar
        src={url}
        className={classes.avatar}
        imgProps={{
            onError:(e) => { e.target.src = ${fallbackImg}`}
        }}
      />
   </Badge>
}

我在这里要做的是听取错误并用我自己文件中的图像替换。我想知道图像链接断开时如何收听。

标签： javascriptreactjsmaterial-ui

Answer 1

头像后备

如果加载头像图像时出错，组件将按以下顺序回退到替代方案：

• 提供的孩子
• 替代文本的第一个字母
• 一个通用的头像图标

这意味着您可以简单地将后备图像作为Avatar组件的子项提供

<Avatar
  src={url}
  className={classes.avatar}
>
  <img className={/* css to style appropriately */} src={fallbackImg} />
</Avatar>

但是，我能够（大多数情况下）实现替换源 URL 的实现。应该注意的是，我无法让这个实现在codesandox中始终如一地工作（在iframe中运行，反应有时会有点不稳定）

const fallbackImage = "../../fallback/img.png"

const MyAvatar = ({ image }) => {
  const [url, setUrl] = useState(image);

  const errorHandler = () => {
    setUrl(fallbackImage);
  }

  return (
    <Avatar
    src={url}
    imgProps={{
      onError: errorHandler,
    }}
    />
  )
};