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.

please make sure you are copying also the next.config.jsfile in your container, as explained here stackoverflow.com/a/76602708/1851110 — Ion Utale
– Ion Utale, Commented Jul 3, 2023 at 7:41

Thammarith · Accepted Answer · 2022-04-29 15:41:59Z

17

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

answered Apr 29, 2022 at 15:41

Thammarith

7807 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mainframer Over a year ago

thank you very much @Thammarith, you have saved my life. I've been spending several hours stucking in this issue.

Tr1stan Feb 3 at 10:07

Side note: setting the alt text of an image to the url really isn't a good idea, people using screen readers and other accessibility tools will struggle making any sense of your content.

Ofir Kariv · Accepted Answer · 2024-08-28 10:19:08Z

0

It looks like Next solve it in version 14 by using overrideSrc :

In some cases, it is not desirable to have the src attribute generated and you may wish to override it using the overrideSrc prop.

For example, when upgrading an existing website from to , you may wish to maintain the same src attribute for SEO purposes such as image ranking or avoiding recrawl.

 input.jsx:
<Image src="/me.jpg" overrideSrc="/override.jpg" />

Would generate:

output.html:
   <img
  srcset="
    /_next/image?url=%2Fme.jpg&w=640&q=75 1x,
    /_next/image?url=%2Fme.jpg&w=828&q=75 2x
  "
  src="/override.jpg"
/>

answered Aug 28, 2024 at 10:19

Ofir Kariv

849 bronze badges

Collectives™ on Stack Overflow

NEXT/Image Component URL issue

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related