Estoy usando next/image y quiero que la imagen no se reproduzca en absoluto cuando la ruta a la imagen no es válida, por ejemplo. la imagen no existe. Ahora muestra el icono pequeño y el nombre alternativo. No quiero mostrar nada en ese caso. ¿Es eso posible? Como es una interfaz, no puedo usar fs para verificar, así que no estoy seguro de qué hacer
<Image src={`/scroll-${router.locale}.svg`} alt="scroll" width="240px" height="240px" className="opacity-50" />Puede ampliar la next/image integrada y agregar un controlador onError para no representar el componente si la imagen no se carga.
import React, { useState } from 'react'; import Image from 'next/image'; const ImageWithHideOnError = (props) => { const [hideImage, setHideImage] = useState(false); return ( !hideImage && ( <Image {...props} onError={() => { setHideImage(true); }} /> ) ); }; export default ImageWithHideOnError; Luego puede usar el componente en lugar de next/image .
<ImageWithHideOnError src={`/scroll-${router.locale}.svg`} alt="scroll" width="240px" height="240px" className="opacity-50" />