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 ?

Nicholas Tower · Accepted Answer · 2021-10-25 15:38:28Z

4

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})`}} />
  }
}

edited Oct 25, 2021 at 15:38

answered Oct 25, 2021 at 15:31

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vlad Over a year ago

thank you so much , for answer

Mian Usman Javed · Accepted Answer · 2024-07-02 12:04:55Z

0

Use the onError handler. It solves the issue of image is shown or not it can handle the error on the image for example

<img
 src={url}
 alt="favicon"
 style={{ width: "20px", margin: "10px" }}
 onError={(e: any) => {
 e.target.onerror = null;
 e.target.src =
 "https://via.placeholder.com/20?text=Error";
  e.target.alt = "Error loading favicon";
  }}
          />

answered Jul 2, 2024 at 12:04

Mian Usman Javed

11 bronze badge

Collectives™ on Stack Overflow

How to check if image is not vallid in react?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related