Don't display next/image component when the image doesn't exist

user_9990279 0
Viewed 1711

I'm using next/image and I want the image to not render at all when the path to the image is invalid, eg. the image doesn't exist. Now it displays the little icon and alt name. I don't want to display anything in that case. Is that possible? Since it's frontend I can't use fs to check, so I'm not sure what to do

      <Image
         src={`/scroll-${router.locale}.svg`}
         alt="scroll"
         width="240px"
         height="240px"
         className="opacity-50"
       />
nextjs-image next.js reactjs javascript
1 Answers

You can extend the built-in next/image and add an onError handler to not render the component if the image fails to load.

import React, { useState } from 'react';
import Image from 'next/image';

const ImageWithHideOnError = (props) => {
    const [hideImage, setHideImage] = useState(false);

    return (
        !hideImage && (
            <Image
               {...props}
               onError={() => {
                   setHideImage(true);
               }}
            />
        )
    );
};

export default ImageWithHideOnError;

You can then use the component instead of the next/image.

<ImageWithHideOnError
    src={`/scroll-${router.locale}.svg`}
    alt="scroll"
    width="240px"
    height="240px"
    className="opacity-50"
/>
user_18707800
Related