I am trying to use a third-party API for getting YouTube thumbnails with higher resolution, which sometimes fails with code 404. If I fail to fetch the image, I would like to replace the src with the default YouTube thumbnail retrieved using its own API (I have the url stored in a json). When I tried to implement this using the img onError event, it appears that nothing is fired when the fetch fails. Does anybody know what's going on? Thanks!

const TestView = () => {

    const videoId = "tuZty35Fk7M"

    return (
        <div>
            <img src={`/${videoId}/maxresdefault.jpg`} onError={() => {console.log("errored")}}></img>
        </div>
    )
}

Update:
This ended up working pretty well

const TestView = () => {

    const videoId = "tuZty35Fk7M"
    const imgRef = useRef(null)
    const [thumbnailSrc, setThumbnailSrc] = useState(`/${videoId}/maxresdefault.jpg`)
    const defaultThumbnailSrc = `/${videoId}/hqdefault.jpg`

    const handleImgValidity = () => {
        if (imgRef.current.naturalHeight == 90) {
            setThumbnailSrc(defaultThumbnailSrc)
        }
    }

    return (
        <div>
            <img ref={imgRef} src={thumbnailSrc} onLoad={handleImgValidity}></img>
        </div>
    )
}

I am trying to use a third-party API for getting YouTube thumbnails with higher resolution, which sometimes fails with code 404. If I fail to fetch the image, I would like to replace the src with the default YouTube thumbnail retrieved using its own API (I have the url stored in a json). When I tried to implement this using the img onError event, it appears that nothing is fired when the fetch fails. Does anybody know what's going on? Thanks!

const TestView = () => {

    const videoId = "tuZty35Fk7M"

    return (
        <div>
            <img src={`https://img.youtube./vi/${videoId}/maxresdefault.jpg`} onError={() => {console.log("errored")}}></img>
        </div>
    )
}

Update:
This ended up working pretty well

const TestView = () => {

    const videoId = "tuZty35Fk7M"
    const imgRef = useRef(null)
    const [thumbnailSrc, setThumbnailSrc] = useState(`https://img.youtube./vi/${videoId}/maxresdefault.jpg`)
    const defaultThumbnailSrc = `https://i.ytimg./vi/${videoId}/hqdefault.jpg`

    const handleImgValidity = () => {
        if (imgRef.current.naturalHeight == 90) {
            setThumbnailSrc(defaultThumbnailSrc)
        }
    }

    return (
        <div>
            <img ref={imgRef} src={thumbnailSrc} onLoad={handleImgValidity}></img>
        </div>
    )
}

• javascript
• reactjs
• image

2 Answers 2

It's nothing to do with React. Try visiting that url in your browser with a random string for the videoId. It will still display an image - in this case the default youtube thumbnail. So even though it's technically a 404, and your browser will report it as such, the image still has something to display so it won't fire the onError function.

If you replace the url in your code with something that is definitely a 404, your code works fine. Run the snippet below where i've swapped out youtube for google and you'll see your error message.

function onError() {
  console.log('errored')
}

<img src="https://img.google./vi/some-random-id/maxresdefault.jpg" onError={onError} />

Here is the working example of firing onError function.

https://codesandbox.io/s/reactjs-onerror-f7dq77