Render null if src url is 404

Question

I use react for an SPA

I have this <img /> component

I pull the src from a URL that is created via props of the functional component that renders the <img />

Sometimes the URL works sometimes it returns a 404 but the img tag I still rendered and with the default .. missing image icon ...

HOW can I make it not render or render some random transparent img IF the first URL is not valid (404)

https://stackoverflow.com/questions/14651348/checking-if-image-does-exists-using-javascript relevant maybe — Sterling Archer, Jan 23 '18 at 19:01
Not sure why this question was downvoted. I found it very useful... — Zeeno, Sep 18 '19 at 13:30

score 3 · Answer 1 · answered Jan 24 '18 at 01:41

As @Sterling Archer mentioned, your problem is relevant with Checking if image does exists using javascript .

To sum it up, that is listening on img's onerror event, and once your url returns 404, onerror will be triggered.

const onError = () => {
    this.setState({ urlError: true })
}

render() {
    return (this.state.urlError ? <img onerror={this.onError} /> : null)
}

score -1 · Answer 2 · answered Jan 23 '18 at 19:09

-1

You could do a cors xhttp request to determine If the status is 404 and then set a state boolean. Use this bool to choose wether to render the image or return null

answered Jan 23 '18 at 19:09

L4B0MB4

151
1
11

Render null if src url is 404

2 Answers2