Netlify redirects stop images from loading

Support
, ,
1

Site: https://643a2bcdccf9264a2d7edeaf--modest-thompson-051914.netlify.app/
Custom domain: havenremix.com

Netlify, in the build logs, adds the following redirects:

Netlify configuration property "redirects" value changed to [
  { from: '/_next/static/*', to: '/static/:splat', status: 200 },
  {
    from: '/_next/image*',
    query: { url: ':url', w: ':width', q: ':quality' },
    to: '/_ipx/w_:width,q_:quality/:url',
    status: 301
  },
  { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },

There are many many more, but there are the relevant ones. Because of these the site wont load images on the custom domain.

The default url provided by netlify works well with images but my custom domain does not. In the defualt url version of the site, the network tab displays the following url when retrieving images: https://6437fb76d2c9f0341cc7e21d--modest-thompson-051914.netlify.app/_ipx/w_828,q_100/%2Fimages%2FHomepage%2Fhomepage_slideshow_2.jpg?url=%2Fimages%2FHomepage%2Fhomepage_slideshow_2.jpg&w=828&q=100
The custom url version displays the following:
https://havenremix.com/nextimg/%2Fimages%2FHomepage%2Fhomepage_slideshow_2.jpg/828/100?url=%2Fimages%2FHomepage%2Fhomepage_slideshow_2.jpg&w=828&q=100

How can I fix this error since this makes the site nearly unusable. I am testing Netlify for hosting a larger project and if I cannot fix this I will likely use Vercel since it supports next.js well.

2

Hi @HavenRemix,

On your latest deploy: https://modest-thompson-051914.netlify.app/, the images seem to be working. Is this resolved?

3

Hi @hrishikesh,

No, the latest deploy is with an older version of the next.js plugin. Anything before version 4.0 works. Currently I am using 3.9.2. This further enforces my assumption that this is caused by the redirects placed. Is there any reason the images would work with the preview domain, but not the custom domain. I can redeploy with version 4.34 of the plugin if you would like to take a look.

4

All those redirects are required and working as intended for a major chunk of Next.js sites on Netlify. Version 3 of the plugin has been deprecated for a long time now and should not be used at all for Next 12+. There would be something specifically wrong with your setup and usage of the plugin that would be causing issues.

For the linked deploy: Netlify App, the images are failing due to error 500 which has nothing to with redirects. It is expected to see that error when you deploy using CLI, unless you install CLI on an Ubuntu machine.

Refer to: