CDN calls intermittently fail in deploy preview

Support
1

Hi, I have a deploy preview @ Tech Interview Coaching | Blog and the images are served via the cdn and they are failing intermittently with status 400. When running netlify dev locally, I encounter no such problems.

I am saying intermittently because, after the first 400, the image eventually succeeds loading (so they might work by the time you check them.

The redirects in the netlify.toml look like this:

[[redirects]]
  # Serve a full size version
  from = "/images/full/*"
  to = "/.netlify/images?url=/images/:splat"
  status = 200

[[redirects]]
  # ...or serve a resized version
  from = "/images/:width/*"
  to = "/.netlify/images?url=/images/:splat&width=:width"
  status = 200

thank you

2

Hi, any update from the team @netlify on this? it’s blocking our latest release

many thanks

3

My guess is that you’re rewriting the same path over and over resulting in a loop. For example"

  • /images/480//posts/software-engineer-interview-v1.jpg gets converted to /.netlify/images?url=/images/posts/software-engineer-interview-v1.jpg&width=480.
  • Netlify tries to fetch the image from the path in url, so the request is now made to: /images/posts/software-engineer-interview-v1.jpg&width=480. This matches your second redirect and gets converted to: /.netlify/images?url=/images/software-engineer-interview-v1.jpg&width=480&width=posts
4

Thanks, that might be ~ how should I write it so it doesn’t do that?

The issue has now extended to my production environment Tech Interview Coaching maybe I am getting rate limited considering the loop above?

5

Simply put, don’t pass Image CDN the same URL that you use in rewrites. You can either:

  • Link your images without any rewrites directly pointing to /.netlify/images/...
  • OR change your images directory to something like img, so you can send the rewrite to /.netlify/images?url=/img/...
6

Is there a chance, that there is a general problem with images at the moment?
On a website of a customer, the images are not displayed anymore. It works locally and there was no change to the images in the last time.

7

I am not seeing multiple complaints at the moment. But I’ll double-check internally.

9

@hrishikesh I am evaluating options; 2 more queries:

  1. why is my production environment is impacted? it’s always worked fine ~ I have not changed the way I manage images redirects there. They look like this:
[[redirects]]
  from = "/cdn/*"
  to = "/.netlify/images?url=/:splat&fm=webp"
  status = 200

[[redirects]]
  from = "/cdn-hq/*"
  to = "/.netlify/images?url=/:splat&fm=webp&q=90"
  status = 200
  1. if the above is an issue, any idea on why my redirects work just fine locally?
11

@hrishikesh if what you’re saying re: loop is true, then this documentation (which I used) from Netlify seems is encouraging customers to cause one How to serve optimized images using Netlify's Image CDN | Netlify Developers

12

That was my guess and I could be wrong about it. We have deployed some changes in this area, so I’m waiting for the devs to confirm if this is related to that.

13

Thanks. Looking forward to the update.

14

We’ve rolled back the changes and the images appear to be working now. Could you confirm?

15

Thanks, the rollback fixed production (where I used /cdn-*/ redirects) Tech Interview Coaching

the one where I use /images/ redirects is still broken Tech Interview Coaching (deploy 173 got merged to development)

16

Did you try to re-trigger a deploy for that PR?

17

Redeployed development and it didn’t help; some images load, some don’t

18

I’ve changed my redirects to

[[redirects]]
  # Serve a full size version
  from = "/cdn/full/*"
  to = "/.netlify/images?url=/images/:splat"
  status = 200

[[redirects]]
  # ...or serve a resized version
  from = "/cdn/:width/*"
  to = "/.netlify/images?url=/images/:splat&width=:width"
  status = 200

(which I think should address the loop concern) and pushed to development but images are still failing

19

Development seems to work now!

20

I also noticed that you have an Edge Function that’s likely handling some HTML modification. Based on that info, it doesn’t seem like the Edge Function needs to run on /*. Can you exclude the Edge Function on /images/* path?

21

sure; can you tell me why that’s bad and how you found out something was wrong? were there errors somewhere?

22

You’re wasting your Edge Function invocations on paths you’re never gonna need those. Is that not a good reason?

That’s just a suggestion. It might or might not help with this Image CDN issue.

The current theory by the devs as well is the loop thing I mentioned. Somewhere something is wrong, but it’s not perfectly clear yet.