Adicionando imagem padrão quando houver erro

Setando imagem padrão ao ocorrer uma falha no carregamento de uma imagem

De forma bem simples:

  • Irei pegar o currentTarget da img quando ocorrer o onError()
  • Chamo a função setDefaultImage() passando este currentTarget
  • Nesta função eu seto o currentTarget.onerror como null para informar que não há mais erro
  • E também chamo o setImageWithErro() passando a minha imagem padrão(defaultImage), esta que substituirá a imagem do state que deu erro.

App.js

import { useState, useCallback } from "react";
import "./styles.css";

const defaultImage = require("./assets/404.png");
// image by https://www.freepik.com/storyset

const App = () => {
  const [image, setImage] = useState(
    "https://raw.githubusercontent.com/ValchanOficial/ValchanOficial/master/social/valchan_octocat.png"
  );
  const [imageWithErro, setImageWithErro] = useState(
    "https://valchan.com.br/errorImage.png"
  );

  const setDefaultImage = useCallback((currentTarget) => {
    setImageWithErro(defaultImage);
    currentTarget.onerror = null;
  }, []);

  return (
    <div className="App">
      <img className="Image" alt="Valchan" src={image ?? defaultImage} />
      <img
        className="Image"
        alt="Valchan"
        src={imageWithErro ?? defaultImage}
        onError={({ currentTarget }) => setDefaultImage(currentTarget)}
      />
    </div>
  );
};

export default App;

Comentários