How to check if image is not vallid in react?

Question

I am trying to create sort of media gallery for React app, but the problem is that sometimes user may upload some demmaged pictures and i need to somehow check if image is possible to read and not demmaged before displaying it. I know on <image/> tag there are property onerror where you display other image if first one didn't work.

 <img src={url} style={style} onError={this.hideImg}/> 

But the problem is that i use a div with image-background so it won't be working for me, and bessides that i also need to display some notification message that file is demmaged. Does anyone knows is there are some ways to check if file is valid before displaying it in react ?

Answer 1

You can create an image in memory (ie, not on the page), and wait for that to load or error out. For example:

const Example = ({ url }) => {
  const [status, setStatus] = useState('loading');
  useEffect(() => {
    const img = new Image();
    img.onload = () => {
      setStatus('success');
    }
    img.onerror = () => {
      setStatus('error');
    }
    img.src = url
    return () => {
      img.onload = null;
      img.onerror = null;
    }
  }, [])

  if (status === 'loading') {
    return null;
  } else if (status === 'error') {
    return <div>Error loading image</div>
  } else {
    return <div style={{ backgroundImage: `url(${url})`}} />
  }
}