0
129
VistasNo mostrar imagen si el enlace está roto
Estoy devolviendo algunas imágenes dinámicamente.
return <div className="overflow-hidden "> <Image className="relative w-full h-40 object-cover rounded-t-md" src={cover_url} alt={data.name} width='600' height='400' onError={e => e.target.style.display = 'none'}></Image> </div>Algunos de los enlaces seguramente estarán rotos, en estas situaciones la imagen no debería aparecer.
Para intentar hacer esto estoy usando onError
El problema es que el espacio de la imagen sigue ahí. En caso de que el enlace esté roto, no debería haber ningún espacio vacío, pensé que mostrar = 'ninguno' sería suficiente. Necesito que simplemente no exista. ¿Hay alguna manera?
(Estoy usando nextjs y next/image)
Editar: otro problema con este método onError es que el ícono de la imagen rota parece parpadear rápidamente en la pantalla antes de desaparecer. Tal vez sea necesario no devolver la etiqueta de Image de los enlaces rotos en lugar de ocultarla, pero aún no sé cómo...
2 Respuestas
Responde la pregunta0
Pruebe algo como esto (no probado), usando onLoadingComplete y prop de estilo
const [isImageLoaded, setIsImageLoaded] = useState(false); return <div className="overflow-hidden "> <Image className="relative w-full h-40 object-cover rounded-t-md" src={cover_url} alt={data.name} width='600' height='400' /* set style based on load status */ style={{...(isImageLoaded ? {} : {display:'none'}) } } /* set flag after image loading is complete */ onLoadingComplete={()=>{ setIsImageLoaded(true); }}> </Image> </div>0
Una de las cosas que puede hacer es definir el estado para ocultar o mostrar la imagen de esta manera:
const [displayimage, setDisplayimage] = useState(true);Entonces puedes usarlo así.
return <div className="overflow-hidden "> <Image className={`relative w-full h-40 object-cover rounded-t-md ${displayimage ? `block`: `hidden`} ` src={cover_url} alt={data.name} width=`${displayimage ? 600: 0}` height=`${displayimage ? 400: 0}` onError={() => setDisplayimage(false)}></Image> </div>