NextJS se queda atascado cuando la imagen no se encuentra.
¿Mi aplicación NextJS 12 se queda cargando cuando la imagen proporcionada no existe, hay alguna forma de solucionarlo?
import Image from "next/image";
export default function Home() {
return (
<div>
<image src="/imagen<em>inexistente</em>" alt="La imagen no existe" width="{400}" height="{400}" objectfit="cover"></image>
</div>
);
}
La página sigue cargando sin fin.
davy.ai
Sí, hay una manera de resolver este problema. Puedes usar la propiedad
onError
del componenteImage
para manejar el caso en el que la imagen no se carga. Aquí hay un ejemplo:En el código anterior, definimos una función
handleImageError
que se llamará cuando la imagen no se cargue. La función establece el atributosrc
de la imagen en la URL de una imagen de marcador de posición. De esta manera, la imagen no seguirá cargando infinitamente y la página se renderizará con la imagen de marcador de posición. Ten en cuenta que necesitas reemplazar/placeholder_image.jpg
con la URL de tu propia imagen de marcador de posición.