Estoy tratando de usar una API de terceros para obtener miniaturas de YouTube con una resolución más alta, lo que a veces falla con el código 404. Si no puedo obtener la imagen, me gustaría reemplazar el src con la miniatura predeterminada de YouTube recuperada usando su propia API. (Tengo la url guardada en un json). Cuando traté de implementar esto usando el evento img onError, parece que no se dispara nada cuando falla la búsqueda. ¿Alguien sabe lo que está pasando? ¡Gracias!
const TestView = () => { const videoId = "tuZty35Fk7M" return ( <div> <img src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`} onError={() => {console.log("errored")}}></img> </div> ) } Actualizar:
Esto terminó funcionando bastante bien
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> ) }No tiene nada que ver con React. Intente visitar esa URL en su navegador con una cadena aleatoria para el videoId . Seguirá mostrando una imagen; en este caso, la miniatura predeterminada de YouTube. Entonces, aunque técnicamente es un 404, y su navegador lo informará como tal, la imagen todavía tiene algo que mostrar, por lo que no activará la función onError .
Si reemplaza la URL en su código con algo que definitivamente es un 404, su código funciona bien. Ejecute el fragmento a continuación donde cambié youtube por google y verá su mensaje de error.
function onError() { console.log('errored') } <img src="https://img.google.com/vi/some-random-id/maxresdefault.jpg" onError="onError()" />Aquí está el ejemplo práctico de activar la función onError.