Vite React Netlify Image CDN redirect doesnt work

[jennifertieuu]

I’m having trouble configuring the Netlify Image CDN with my React Vite site using the redirects. To test it, I explicitly put the /.netlify/images URL for one image (tomas-malik-1.jpg) source and then created a _redirects file in the public/ folder with a redirect to ./netlify/images for another image (tomas-malik-2.jpg).

App.jsx

      <img
        src="/.netlify/images?url=/img/tomas-malik-1.jpg"
        alt="Tomas Malik 1"
      />
      <img src="/pic/tomas-malik-2.jpg" alt="Tomas Malik 2" />

public/_redirects

/pic/* /.netlify/images?url=/:splat 200

The image (tomas-malik-1.jpg) seems to show up correctly for the image I explicitly put the /.netlify/images as the image source but not the other image (tomas-malik-2.jpg).

I can’t seem to figure out why this isn’t working. I don’t know if I misconfigured it or something else. If anyone knows the solution, I would appreciate any help. Thank you!

My test site name: https://vite-react-test-cdn.netlify.app/

[nathanmartin]

@jennifertieuu The answer is easy to spot if you run through what the system will do:

If you tried to access:
/pic/tomas-malik-2.jpg

The redirect would create:
/.netlify/images?url=/tomas-malik-2.jpg

You need:
/.netlify/images?url=/pic/tomas-malik-2.jpg 200

So the issue is that the redirect does not contain /pic/

You can confirm this instantly by editing the src to /pic/pic/tomas-malik-2.jpg which loads:

You should change your redirect to:

/pic/* /.netlify/images?url=/pic/:splat 200

[jennifertieuu]

Hi Nathan,

I don’t know how I didn’t think to try that or how I missed it, but updated it now and it’s working. Thank you so much, I appreciate it!