0

I am using next/image component with next js ^12.2.3-canary.17 version for my project now issue what i am facing here with this image component is some images were missing from the source directory itself.For this reason it returns infinite error logs as below image:

enter image description here

I want to replace the current image URL with another URL that indicates the absence of an image. To prevent an infinite loop, I have found a solution where I set the onerror property to null and replace the src attribute with a fallback image, like this:

enter image description here

but it didn't help.

PS: I've added valid domains in my next.config.js error is not relates to this.

Can anyone assist? I would appreciate any suggestions.

Manish Jha
  • 263
  • 2
  • 13

1 Answers1

0

I handled it like this:

const [imageError, setImageError] = useState(new Map<string, boolean>());

function handleImageError(itemId:string) {
    setImageError(imageError.set(itemId, true));
  }

return(
                        <Image 
                        height={301}
                        width={226}
                        src={item && !imageError.get(item.id) && item.image `${process.env.API_URL}/${item.image}`}
                        onError={() => {
                          handleImageError(item.id);
                        }} />
)

Not sure if it's the good way, thought

Constance Laborie
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 13 '23 at 16:36