Do not display image if link is broken

user_11860534 0
Viewed 255

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

enter image description here

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...

nextjs-image tailwind-css next.js reactjs javascript
2 Answers

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>
user_11883220

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>

Edit for multiple images.

One thing you can do is to define a key for each image in array likr this

img_array = [ { src: image_src,
                key: Math.floor(Math.random()*Date.now()).toString(),
                isDisplayed:false, 
              },
              { ... },
              { ... },
             ]

ANd then define a functionlike this

  const handleVisible = (keygiven) => {
    for (let i in img_array) {
      if (img_array[i].key === keygiven) {
        
        if (img_array[i].isDisplayed === true) {
          img_array[i].isDisplayed = false;
        } else {
          img_array[i].isDisplayed = true;
        }

        setDisplayimage(img_array[i].isDisplayed);
      }
    }
  };

And then in the map function use it like this:

img_array.map((item) => { 
   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)} onClick={handleVisaible}></Image>
          </div>
      )
});

Please check any syntactical mistake as I am directly writting the code here only XD

user_109623640
Related