Do not display image if link is broken

Question

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

To get rid of the flash try hiding the images by default and only showing them if they load. — admcfajn, Jun 10 '22 at 01:22
Your flash of un-styled content which results in a briefly flashing icon is due to the fact that first your page attempts to render and then the error is propagated. And you are going to want to hide the div, not just the image.And I would not hard code image size unless you are certain these are the dimensions. — , Jun 10 '22 at 01:25
@admcfajn add the 'hidden' class, it doesn't hide the image, maybe it's something with tailwind too... — Felipe Cristiano, Jun 10 '22 at 01:43
I have never tried nextjs so dont't know about the syntax, but Is the function in ErrorCode called? I tried in vanilla javascript, and the display none works https://jsfiddle.net/gaotter/43zxq1cm/54/ — Gaotter, Jun 10 '22 at 08:19
Does this answer your question: [Don't display next/image component when the image doesn't exist](https://stackoverflow.com/questions/69538426/dont-display-next-image-component-when-the-image-doesnt-exist)? — juliomalves, Jun 13 '22 at 17:18

score 1 · Answer 1 · answered Jun 10 '22 at 07:06

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>

MagnusEffect · Answer 2 · 2022-06-26T05:33:52.273

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

this almost worked, the problem is that I have several images, so when an image is broken link, all images disappear, as the status is repeated in all images, maybe a status array would work... — Felipe Cristiano, Jun 26 '22 at 04:40
Earlier the question is for a single image, so first, upvote the answer. Secondly, @FelipeCristiano I had mad edit to the answer for multiple images. If it works for you, so accept the answer also. — MagnusEffect, Jun 26 '22 at 05:35
I said that there were more than one and that some would come with a broken link, the screenshot was just an example. — Felipe Cristiano, Jun 26 '22 at 13:31

Do not display image if link is broken

2 Answers2

Edit for multiple images.