CODEWITHSUNDEEP
javascripthtmlreactjsjsx
Vlad
Vlad

Reputation: 511

How to check if image is not vallid in react?

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 ?

Upvotes: 1

Views: 979

Answers (2)

Mian Usman Javed
Mian Usman Javed

Reputation: 1

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";
  }}
          />

Upvotes: 0

Nicholas Tower
Nicholas Tower

Reputation: 85161

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

Upvotes: 4

Related Questions