[nuxt3] Static image generation still results in 404 after latest update for certain images only

[jamesxu123]

For some reason images in certain routes are not pre-rendered but not others. This is after #614.

I have found that Nuxt Images with width and height set do not get rendered statically. E.g. <nuxt-img format="avif" class="img-fluid" width="1920" height="1000" :src="imgPath" alt=""></nuxt-img> does not, but <nuxt-img format="avif" class="img-fluid" :src="imgPath" alt=""></nuxt-img> does.

[jamesxu123]

Static generation does not seem to be working at all when using Nuxt Picture

[jimhlad]

@jamesxu123 Does this only happen when multiple formatters are applied (e.g. width, height, quality, etc)?

If so just made #673 to hopefully solve this issue. And #674 possibly for the second one.

[FilipBartos]

@jimhlad I am using simple <nuxt-picture> in my project:

<nuxt-picture
  :src="..."
  :imgAttrs="{ class: '...' }"
/>

and your changes in #674 seems to fixed image generation for me. I hope these changes will be merged soon 👍

Thanks!

[tex0l]

On my end, it doesn't work at all, no static image is built. Am I missing something?
EDIT: nuxt-img works if I don't set the dir option and use the default public directory, the documentation specifically says that I should "deploy customized dir", but I don't know how to do that. But nuxt-picture still doesn't work

My env:

• node v18.12.1
• macOS 13.0.1 (22A400)
• [email protected]
• @nuxt/[email protected]

I use as well (normally unrelated):

• @nuxt/[email protected]
• [email protected]
• @nuxtjs/[email protected] along with @tailwindcss/[email protected]
• [email protected]

My @nuxt/image-edge config is as follows:

// nuxt.config.ts
  image: {
    dir: 'assets/images'
  }

I use nuxt-picture or nuxt-img like this:
<nuxt-img src="image-name.png"/> or <nuxt-picture src="image-name.png" />

And they are rendered as:

<img src="/_ipx/_/image-name.png">

and

<picture>
  <source
    type="image/webp"
    sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
    srcset="/_ipx/w_320,f_webp/image-name.png 320w, /_ipx/w_640,f_webp/image-name.png 640w, /_ipx/w_768,f_webp/image-name.png 768w, /_ipx/w_1024,f_webp/image-name.png 1024w, /_ipx/w_1280,f_webp/image-name.png 1280w, /_ipx/w_1536,f_webp/image-name.png 1536w, /_ipx/w_1536,f_webp/image-name.png 1536w">
  <img
    src="/_ipx/w_1536,f_png/image-name.png"
    sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
    srcset="/_ipx/w_320,f_png/image-name.png 320w, /_ipx/w_640,f_png/image-name.png 640w, /_ipx/w_768,f_png/image-name.png 768w, /_ipx/w_1024,f_png/image-name.png 1024w, /_ipx/w_1280,f_png/image-name.png 1280w, /_ipx/w_1536,f_png/image-name.png 1536w, /_ipx/w_1536,f_png/image-name.png 1536w">
</picture>

But in my .output/public there is no _ipx/ directory.

By the way, I get the following error during prerender:

ERROR  (node:20632) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time 
(Use `node --trace-warnings ...` to show where the warning was created)

I don't know if that's expected.

[alexiokay]

Same problem no _ipx/ directory

[pi0]

Hi there! Sorry for checking this too late. Some improvements are landed via #725 to v1 edge which i believe should solve issues related to prerendering. Please try upgrading nuxt+nitro+image and let me know with a new issue/reproduction if still some images are not properly prerendered.