Adicionando imagem padrão quando houver erro | Valchan
Home

03 de abril de 2021 • 1 min de leitura

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