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
– admcfajn, Commented Jun 10, 2022 at 1: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. — user796446
– user796446, Commented Jun 10, 2022 at 1:25
@admcfajn add the 'hidden' class, it doesn't hide the image, maybe it's something with tailwind too... — Felipe Cristiano
– Felipe Cristiano, Commented Jun 10, 2022 at 1: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 jsfiddle.net/gaotter/43zxq1cm/54 — Gaotter
– Gaotter, Commented Jun 10, 2022 at 8:19

kiranvj · Accepted Answer · 2022-06-10 07:06:00Z

1

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>

answered Jun 10, 2022 at 7:06

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MagnusEffect · Accepted Answer · 2022-06-26 05:33:52Z

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>

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

edited Jun 26, 2022 at 5:33

answered Jun 10, 2022 at 6:45

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

3 Comments

Felipe Cristiano Over a year ago

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

MagnusEffect Over a year ago

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.

Felipe Cristiano Over a year ago

I said that there were more than one and that some would come with a broken link, the screenshot was just an example.

Collectives™ on Stack Overflow

Do not display image if link is broken

2 Answers 2

Comments

Edit for multiple images.

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Edit for multiple images.

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related