Do not display image if link is broken-CodePudding

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'  one rror={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 one rror 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...

CodePudding user response：

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 */
             onl oadingComplete={()=>{ setIsImageLoaded(true); }}>
          </Image>
       </div>

CodePudding user response：

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}`  one rror={() => setDisplayimage(false)}></Image>
           </div>