javascript - React img onError not firing - Stack Overflow

admin管理员组

文章数量:1390650

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

Share Improve this question Follow edited May 30, 2022 at 23:03 softandwet asked May 30, 2022 at 21:56 softandwetsoftandwet 4111 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

本文标签： javascriptReact img onError not firingStack Overflow