hey,

Let’s say you have image tag and src link appears to be incorrect one: image does not exist for that address. We can use onError img attribute to add handler for this situation. Below I will add React code as example.

export const ImgWithFallback = (props) => {
  const {
    url
  } = props
  const [erroredImage, setErroredImage] = useState(false)
  const dummyUrl = "https://fallbackimage.png"
        return (<img
          onError={() => setErroredImage(true)}
          src={erroredImage ? dummyUrl : url}
        />)
      )
  )
}

In the snippet, we added fallback in case our src is not available.

Leave a Reply

Your email address will not be published. Required fields are marked *