Estoy tratando de crear una especie de galería de medios para la aplicación React, pero el problema es que a veces el usuario puede cargar algunas imágenes dañadas y necesito verificar de alguna manera si es posible leer la imagen y no dañarla antes de mostrarla. Sé que en la etiqueta <image/> hay una propiedad onerror en la que muestra otra imagen si la primera no funcionó.
<img src={url} style={style} onError={this.hideImg}/>Pero el problema es que uso un div con fondo de imagen, por lo que no funcionará para mí, y además, también necesito mostrar un mensaje de notificación de que el archivo está dañado. ¿Alguien sabe si hay algunas formas de verificar si el archivo es válido antes de mostrarlo en reaccionar?
Puede crear una imagen en la memoria (es decir, no en la página) y esperar a que se cargue o se produzca un error. Por ejemplo:
const Example = ({ url }) => { const [status, setStatus] = useState('loading'); useEffect(() => { const img = new Image(); img.onload = () => { setStatus('success'); } img.onerror = () => { setStatus('error'); } img.src = url return () => { img.onload = null; img.onerror = null; } }, []) if (status === 'loading') { return null; } else if (status === 'error') { return <div>Error loading image</div> } else { return <div style={{ backgroundImage: `url(${url})`}} /> } }