Как изменить резервное изображение с помощью пользовательского интерфейса материала?

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>
}

Я пытаюсь здесь прослушать ошибку и заменить ее изображением из моего собственного файла. Я хотел бы знать, как слушать, когда ссылка на изображение не работает.

Answer 1

Резервные варианты аватара

Если при загрузке изображения аватара возникает ошибка, компонент возвращается к альтернативному варианту в следующем порядке:

• предоставленные дочерние элементы
• первая буква альтернативного текста
• общий c значок аватара

Это означает, что вы можете просто предоставить запасной вариант image как дочерний элемент Avatar компонента

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

Однако мне удалось заставить работать реализацию ( большую часть времени ), которая заменяет исходный URL. Следует отметить, что мне не удалось заставить эту реализацию постоянно работать в codeandox ( работает в 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,
    }}
    />
  )
};

Отредактируйте как-to-change-with-fallback-image-with-material-ui