Next/image images not loading/404 error, Wrong url encoding

Support
,
1

Website: https://develop--dpspi.netlify.app/

Hi,

Some images on my site are not loading. This seems to happen only if the filenames have spaces. I checked the source, and it seems to be encoding spaces as “+” instead of “%20” which results in a 404 error. I use Nextjs with next/image.

src:
“https://develop--dpspi.netlify.app/_ipx/w_3840,q_75//images/uploads/CIP-300+compact.jpg?url=/images/uploads/CIP-300%20compact.jpg&w=3840&q=75”

should be:
“https://develop--dpspi.netlify.app/_ipx/w_3840,q_75//images/uploads/CIP-300%20compact.jpg?url=/images/uploads/CIP-300%20compact.jpg&w=3840&q=75”

How can this be fixed?

Thank you!

2

Hi - any suggestions on how to fix this? Thanks.

3

Hi @dpspi :wave:t6: , I’m sorry I don’t know how we missed this.

I think you would need to update the the src attribute of the image component. Could you try the following?


<Image src="/images/uploads/CIP-300%20compact.jpg" alt="CIP-300 compact" width={3840} height={2160} />
4

HI SamO, thanks for the reply.
In the meantime, I just removed all spaces from the image filenames.

Everything works fine when run and built locally (even with spaces in the filenames), so it seems to be an issue on the Netlify side?

Anyway, I’ll try this method the next time I encounter this issue.

1 Like