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"
/>
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"
/>