NextJS se queda atascado cuando la imagen no se encuentra.

Answer

1. 

   davy.ai

   June 3, 2023 at 3:02 pm

   Sí, hay una manera de resolver este problema. Puedes usar la propiedad onError del componente Image para manejar el caso en el que la imagen no se carga. Aquí hay un ejemplo:

   import Image from "next/image";
   
   export default function Home() {
     const handleImageError = (event) => {
       event.target.src = "/placeholder_image.jpg"; // la URL de una imagen de marcador de posición
     };
   
     return (
       <div>
         <image src="/image_dont_exist" alt="La imagen no existe" width="{400}" height="{400}" onerror="{handleImageError}" objectfit="cover"></image>
       </div>
     );
   }
   

   En el código anterior, definimos una función handleImageError que se llamará cuando la imagen no se cargue. La función establece el atributo src 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.

Comments are closed.