4

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.

Adam Hill
  • 315
  • 3
  • 8
  • please make sure you are copying also the `next.config.js`file in your container, as explained here https://stackoverflow.com/a/76602708/1851110 – Ion Utale Jul 03 '23 at 07:41

1 Answers1

8

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}
/>
Thammarith
  • 662
  • 5
  • 19