我正在嘗試使用第三方 API 來獲取更高解析度的 YouTube 縮略圖，有時會失敗并顯示代碼 404。如果我無法獲取影像，我想將 src 替換為使用其自己的 API 檢索到的默認 YouTube 縮略圖（我將 url 存盤在 json 中）。當我嘗試使用 img one rror 事件來實作這一點時，似乎在獲取失敗時沒有觸發任何內容。有人知道發生了什么嗎？謝謝！
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>
)
}
uj5u.com熱心網友回復：
這與 React 無關。嘗試在瀏覽器中使用videoId. 它仍會顯示影像 - 在這種情況下是默認的 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()" />轉載請註明出處，本文鏈接：https://www.uj5u.com/net/483290.html
標籤：javascript 反应 图片