NEXT/Image Component URL issue

Question

I am using NEXT/Image component and facing this issue:

When I open the source code on chrome the image src is this:

https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

but when I make google crawl the website in search console and see the code how google sees it, I see the image URLs like this:

https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg& amp;w=384& amp;q=100

The URL has changed the "&" character to "& amp;" which is stopping google from indexing the images because this URL gives an error of:

400: BAD_REQUEST Code: INVALID_IMAGE_OPTIMIZE_REQUEST

and google is not able to crawl these images and index them because it seems like a broken link to it.

Any idea why this is happening?

Thank You.

Answer 1

I came a cross this issue today as well. I found an answer to this question solves my problem. Create a loader function and pass it to the image component.

const loaderProp =({ src }) => {
    return src;
}

<Image
      src={currentImage.imageurl}
      alt={currentImage.imageurl} 
      layout="fill"
      className={styles.imageSize} 
      loader={loaderProp}
/>