Problems with Netlify Image CDN: 404

Support
1

I started using Netlify Image CDN and got it to work locally. However, after Deploying it on a branch, there are no images:

Original image is available:
https://release-v2--adorable-squid-website.netlify.app/image/cms/project_gallery/01_city.jpg

1280×800 220 KB

Resized image not available:
https://release-v2--adorable-squid-website.netlify.app/.netlify/images?url=/image/cms/project_gallery/01_city.jpg&w=756
https://release-v2--adorable-squid-website.netlify.app/.netlify/images?url=/image/cms/project_gallery/01_city.jpg&w=756

Is there a problem with the image CDN or using it on branches?

For completeness, here is my netlify.toml:

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

[[headers]]
for = "/*.woff2"
[headers.values]
Access-Control-Allow-Origin = "*"
Content-Type = "font/woff2"
2

The original image URL returns a 404 for me: Error 404: Page not found (release-v2–adorable-squid-website.netlify.app)

3

@hrishikesh
I’m sorry, I’ve switched some things around while trying to resolve the issue. Here are the correct URLs:

Working Image:
https://release-v2--adorable-squid-website.netlify.app/image/cms/project_gallery/cinecite_01_city.png

1920×1080 395 KB

Not working resize:
https://release-v2--adorable-squid-website.netlify.app/.netlify/images?url=/image/cms/project_gallery/cinecite_01_city.png&w=756
https://release-v2--adorable-squid-website.netlify.app/.netlify/images?url=/image/cms/project_gallery/cinecite_01_city.png&w=756

4

Next’s Edge Function seems to be taking over that URL. You’d have to ask Nuxt to allow excluding that path.

5

@hrishikesh
I was trying to set a netlify redirect in the netlify.toml to avoid this behaviour but the netlify cli informed me that this was not allowed:

Warning: some redirects have syntax errors:
Could not parse redirect number 1:
  {"from":"/.netlify","to":"/.netlify/:splat","force":true}
"path" field must not start with "/.netlify"

Again my netlify.toml file (without the additional rule):

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

[[headers]]
for = "/*.woff2"
[headers.values]
Access-Control-Allow-Origin = "*"
Content-Type = "font/woff2"

I was under the impression that Nuxt should not be able to catch routes under the special /.netlify path. Is that incorrect?

6

Edge Functions run on all paths including /.netlify. The only way to skip that is by using excludedPath but Nuxt doesn’t do it and it doesn’t let the user do it too. You can take some inspiration on a way to force it by checking this issue: Allow excluding paths when using Netlify Edge Functions · Issue #10584 · sveltejs/kit (github.com)

1 Like
7

@hrishikesh
First, thank you very much for helping me. It’s greatly appreciated.

Unfortunately, I’m very confused about these edge functions. Is this a functionality of Nuxt? I certainly haven’t configured anything and can’t find any documentation about it or in my code. I’ve also created a test project and there, it seems to work fine without any additional configuration. I’m just confused at this point…

Here’s my test project. It works fine and I don’t know why it’s not the same in my original project…
https://main--asq-netlify-images-test.netlify.app/

8

@hrishikesh
I’ve also deployed the exact same files in a fresh Repo and Netlify-Site and also there, the images work.

EDIT:
I’ve compared the projects in the Netlify UI and found the culprit… There was an env var called NITRO_PRESET=netlify-edge that I don’t remember putting there (or why). I’ve removed it and now everyting works fine. I’ve also found a similar ticket that might help others fix similar solutions: Bug: Scheduled functions are not executed when Edge Functions are enabled using NITRO_PRESET=netlify-edge

Thank’s for your help and pointing me into the right direction!