反应 img onError 没有触发

Question

我正在尝试使用第三方 API 获取更高分辨率的 YouTube 缩略图，有时会失败并显示代码 404。如果我无法获取图像，我想将 src 替换为使用自己的 API 检索的默认 YouTube 缩略图（我将 url 存储在 json 中）。当我尝试使用 img onError 事件实现它时，似乎在获取失败时没有触发任何东西。有人知道发生了什么事吗？谢谢！

const TestView = () => {

    const videoId = "tuZty35Fk7M"

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

更新：
这最终效果很好

const TestView = () => {

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

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

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

Answer 1

这与 React 无关。尝试在浏览器中使用 videoId 的随机字符串访问 url。它仍会显示图像 - 在本例中为默认的 youtube 缩略图。因此，即使它在技术上是 404，并且您的浏览器会这样报告它，图像仍然有一些东西要显示，所以它不会触发 onError 函数。

如果您将代码中的 url 替换为肯定是 404 的内容，则您的代码可以正常工作。运行下面的代码片段，我将 youtube 换成 google，您会看到错误消息。

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

<img src="https://img.google.com/vi/some-random-id/maxresdefault.jpg" onError="onError()" />

反应 img onError 没有触发

React img onError not firing

javascript

reactjs

image