Estoy tratando de mostrar imágenes de las llamadas a la API. Quiero mostrar una imagen de marcador de posición en caso de que no haya imágenes o errores. Para eso, escribí este código,
const [errorImage, setErrorImage] = useState(null); <Image src={`${imageUrl}/${item.image}`} alt="image" layout="fill" objectFit="contain" onError={(e) => { if (!errorImage) { setErrorImage(true); e.target.src = "/static/placeholder.jpg"; } }}Pero no está funcionando.
Cambiar el estado de errorImage cuando lo establece en true hará que los componentes se vuelvan a procesar, por lo que no necesita configurar e.target.src directamente.
Opción 1 En su lugar, puede hacer lo siguiente:
const [errorImage, setErrorImage] = useState(null); const errorImageUrl = "/static/placeholder.jpg"; const url = errorImage ? errorImageUrl : `${imageUrl}/${item.image}`; <Image src={url} alt="image" layout="fill" objectFit="contain" onError={(e) => { if (!errorImage) { setErrorImage(true); } }} Opción 2 Alternativamente, puede usar el nuevo accesorio de placeholder de posición que se agregó al componente <Image> en NextJS 11. Esto mostrará una versión borrosa de la imagen que proporciona.
<Image src={url} alt="image" layout="fill" placeholder="/static/placeholder.jpg" objectFit="contain"