0
123
ViewsDo not display image if link is broken
I'm returning some images dynamically
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>
Some of the links will certainly be broken, in these situations the image should not appear.
To try to do this I'm using onError
The problem is that the image space is still there. In case the link is broken, there should be no empty space, I thought a display='none' would be enough. I need it just not to exist. Is there any way?
(I'm using nextjs and next/image)
Edit: Another problem with this onError method, is that the broken image icon seems to flash quickly on the screen before disappearing.
Maybe it's necessary not to return the Image tag for the broken links instead of hiding it, but I still don't know how...
2 answers
Answer question0
Try something like this (not tested), using onLoadingComplete and style prop
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
One of the thing you can do is to define the state for hidng or displaying the image like this:
const [displayimage, setDisplayimage] = useState(true);
Then you can use it like this
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>