I’m having a problem with my redirects locally with Netlify Dev. The gist of what I’m trying to achieve is pretty much summed up in this tweet: https://twitter.com/philhawksworth/status/1328340868726726656?s=20 and this tweet: https://twitter.com/philhawksworth/status/1328350104340848641?s=20
Essentially, fetch images and use cloudinary to optimize my images but if there is a 404 fall back to the local image.
The way I think this should work is:
- When the site is live (on Netlify) all images will be sent to Cloudinary and be optimized and then proxied through Netlify
- When being developed locally (on Netlify Dev) the Cloudinary bit will return a 404 and Netlify Dev would fall back to the second redirect to return the local image.
This is what I have in my netlify.toml
command = “npm run production”
publish = “dist”
[dev] framework = "#custom" command = "npm run dev" publish = "dist" targetPort = 8081 port = 8888 [[redirects]] from = "/img/:image" to = "https://res.cloudinary.com/rjdusk/image/fetch/q_auto,f_auto,w_auto,dpr_auto/https://www.madebydusk.com/images/:image" status = 200 [[redirects]] from = "/img/*" to = "/images/:splat" status = 404
The site is developed in Eleventy, but not in the default folder structure, hence why the [dev] block is custom framework.
What currently happens in Netlify Dev with these redirects is if the image exists on the live server already, it will load with the proxying in place. If the image is not on the live server but is on my dev server (Netlify dev) I get a 404. What I was after with these redirect was:
- If it’s on live then great load the Cloudinary optimized version proxied through Netlify
- If not, then no worries just fall back to the local image and proxy
I know I must have missed something or misunderstood something, just hoping someone here can shine a light here for me