Images not loading on Netlify

[scottyzen]

I'm not sure if this is an issue with this module or just Netlify itself. There is also a thread here about it Netlify CDN Image 404 - Nuxt. Would love to hear if anyone else is having this issue.

I've redeployed to vercel and the images are working fine there. So I'm guessing it's an issue with Netlify. See both sites below:

• https://woonuxt-v3.vercel.app/products - Vercel ✅
• https://v3.woonuxt.com/products - Netlify ❌

Both sites are using IPX for image transformation. The only difference I can see is after the IPX options in the image url, there is a single slash on Vercel and a double slash on Netlify. By removing one of the slashes on Netlify, the image works fine. There seem to be a redirect somewhere that is not happening. Woundering if this is something that can be fix from this module or if it's something that Netlify needs to fix. Any help would be appreciated.

Example of the image url:

• Broken image: https://v3.woonuxt.com/_ipx/f_webp&fit_outside&s_440x496/https://secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg
• Working image: https://v3.woonuxt.com/_ipx/f_webp&fit_outside&s_440x496/https:/secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg

[danielroe]

cc: @pi0

[pieh]

Hi @scottyzen I attempted to reproduce with following

nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxt/image"],
  image: {
    // force ipx, as otherwise it would default to using Netlify Image CDN (which probably is better to use, but issue is about ipx)
    provider: "ipx",
    domains: ["secure.woonuxt.com"],
  },
});

and app.vue:

<template>
  <div>
    <NuxtImg src="https://secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg" />
  </div>
</template>

however I was unable reproduce the problem, as things seems to work (with double // after https: in source image url part of pathname) - just copying pathname from your paths you reported to my deploy is working (as I didn't use any modifiers in my snippet above):

• works fine - https://main--soft-basbousa-ff9ba7.netlify.app/_ipx/f_webp&fit_outside&s_440x496/https://secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg
• 404s 🤔 https://v3.woonuxt.com/_ipx/f_webp&fit_outside&s_440x496/https://secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg

I've used freshly created project, so maybe it's matter of upgrading your dependencies - it seems like with everything being latest things do work with ipx on Netlify unless there is more variables that cause those paths to 404 on your site?

Regardless of above, I would suggest using Netlify Image CDN (over ipx) when deploying to Netlify (it should be default unless you are forcing ipx) as it's better suited to run image transformation than running ipx/sharp on general purpose lambdas

[scottyzen]

Hi @pieh

Thanks for looking into it. I ended up having to go with Netlify's image CDN, for the time being anyway. But even with that I still had to update the netlify.toml file too, for example:

[images]
  remote_images = ["https://secure.woonuxt.com/.*"]

Passing the domain into the NuxtImg settings isn't enough to get them working. 🤔

[KnoerleMan]

Currently want to deploy to netlify as well.

The used images are located in the public dir in my case.
Locally everything works fine.

Deploying on netlify the _ipx folder is missing and therefore the used images are not shown.

Changing the deploy settings build command to nuxt generate "fixes" the problem (_ipx folder is present).
Anyway this should not be the solution.

[pieh]

But even with that I still had to update the netlify.toml file too, for example:

[images]
  remote_images = ["https://secure.woonuxt.com/.*"]

Passing the domain into the NuxtImg settings isn't enough to get them working. 🤔

Hmmm, this should be automatic since #1287 (with my reproduction attempt I didn't need to do that manually, I just declared domains in nuxt.config.ts#image.domains and changes from previously referenced pull request handled configuring Netfliy automatically for me.

[scottyzen]

Hi, @pieh,

I just had read of the Netlify docs about the remote-path and it say's that you only need to double-escape regex in the netlify.toml file. So I wonder if the below change to the remote_images property would work since it's the config.json file that we are targeting?

nuxt.options.nitro = defu(nuxt.options.nitro, {
  netlify: {
    images: {
      // remote_images: moduleOptions.domains.map(domain => `https?:\\/\\/${domain.replaceAll('.', '\\.')}\\/.*`)
      remote_images: moduleOptions.domains.map((domain) => `https://${domain.replace(/(^\w+:|^)\/\//, '')}/.*`),
  }
}

[pieh]

@scottyzen can you share your nuxt config (part related to images configuration)?

I used same one as in #1330 (comment) with just provider commented out to use default Netlify Image CDN and that just worked - but it also only escaped . dots in domain I provided and didn't need to do anything else. It's possible that that current code is not sufficient for every input, so was just wondering what example input it could be that might not work (and so that I could try to test it on my end as well to confirm)

[scottyzen]

Hi @pieh ,

Sure, I've tried almost every combination of settings. Here's what I have now:

image: {
    provider: 'netlify',
    domains: ['secure.woonuxt.com'],
},

As soon as I comment out the following in my netlify.toml file it breaks:

# [images]
#   remote_images = ["https://secure.woonuxt.com/.*"]

So at the moment, for me anyway. I need to set the remote_images in the .toml file for the images to work. Once that's set either provider ( netlify or ipx ) will work.

[pieh]

Is scottyzen/woonuxt#157 where you are doing that exploration?

If it is then I noticed that if I use nuxt generate (which is what is used now on the site I linked) - it doesn't seem to automatically configure Netlify Image CDN, but it does when nuxt build is used. This is a bit unknown to me, but when doing nuxt generate it seems like static Nitro preset is forced and so code added in Nitro to support automatic configuration ( nitrojs/nitro#2264 ) is not being executed? I didn't do detailed debugging on this, but this seems plausible why you still have to use netlify.toml to register remote image domains when nuxt generate is used?

[pieh]

https://github.com/unjs/nitro/blob/346a49508b58b747f164ff7aca062ba74174fcbe/src/presets/netlify-v2.ts#L29-L40 this seems to need to be replicated (with at least some adjustment as directories point to different things) to netlifyStatic preset ( https://github.com/unjs/nitro/blob/346a49508b58b747f164ff7aca062ba74174fcbe/src/presets/netlify-v2.ts#L90-L104 ) as this one seems to be actually used with nuxt generate (probably all the other variants too, I'm just pretty new to this setup so it's not very clear to me )

It seems to me that this config setting for images should be similarly common for each variant of preset in same way as writeHeaders and writeRedirects currently is?

[scottyzen]

Is scottyzen/woonuxt#157 where you are doing that exploration?

If it is then I noticed that if I use nuxt generate (which is what is used now on the site I linked) - it doesn't seem to automatically configure Netlify Image CDN, but it does when nuxt build is used. This is a bit unknown to me, but when doing nuxt generate it seems like static Nitro preset is forced and so code added in Nitro to support automatic configuration ( unjs/nitro#2264 ) is not being executed? I didn't do detailed debugging on this, but this seems plausible why you still have to use netlify.toml to register remote image domains when nuxt generate is used?

@pieh Yeah, I'm using nuxt generate

[marius-mcfly]

With Netlify Edge Preset the images are still ending in a 404.
My Nuxt Version is 3.11.2

Works:

nitro: {
	preset: 'netlify',
},

Breaks:

nitro: {
	preset: 'netlify-edge',
},

Could this issue be connected with the problem here?
nitrojs/nitro#854

[peralta]

I ran into the same issue and investigated a little bit further. Nitro's Netlify edge functions are run for every single route, and nitro's endpoint is set for /* without any exclusion (which the nitro netlify preset does not support). If the nitro's generated manifest.json contained

...
"excludedPattern": "/.netlify/(.*)",
...

the generated Nitro edge function would not capture the request and Netlify would end serving it. This is not a problem with the netlify preset because the image route is processed by Netlify before _redirects. So I think @marius-mcfly's hypothesis (#1330 (comment)) is correct.
I started exploring building a new custom Nitro preset to solve this, which should work. The caveat is that custom preset support might be dropped (see nitrojs/nitro-preset-starter#3).