various issues with nuxt image in production

[alexiokay]

Error: File not found (/var/public/images/.../1.jpg)

nuxt-img.swiper-image(:src="slide.img" class="swiper-lazy rounded-xl" width="560" height="420" format="webp" alt="logo")

In development everything works as expected.

[danielroe]

would you provide a reproduction please? 🙏

[danielroe]

Here's some more info on what we mean by a minimal reproduction.

[alexiokay]

I reproduced it and now it's completly broken even in dev... https://stackblitz.com/edit/github-hlesub?file=package.json

[Birleyici]

it works locally but not in production (vercel). What's the solution ?

[destroytoday]

If it helps, I’m experiencing a similar issue discrepancy when deploying to Vercel, but it disregards any modifiers. (e.g., dev works as expected when specifying width, quality, format, etc., but in production, width is set to an unrelated number (10x the CSS width) and quality is set to 100 (when it's originally set to 70). Fwiw, I’m not specifying any nuxt config image settings, in case there’s a missing test case without those settings.

[shaunnbarron]

Having same issue when deploying to Netlify. I notice that my build outputs different routes when the build runs on netlify. When I run generate locally I get:

ℹ Prerendering 3 initial routes with crawler                                                                                                      nitro 10:55:27
  ├─ / (137ms)                                                                                                                                    nitro 10:55:27
  ├─ /200.html (1ms)                                                                                                                              nitro 10:55:27
  ├─ /404.html (1ms)                                                                                                                              nitro 10:55:27
  ├─ /_ipx/f_webp/avatar.jpeg (45ms)                                                                                                              nitro 10:55:27
  ├─ /_ipx/h_50/go_logo.svg (1ms)                                                                                                                 nitro 10:55:27
  ├─ /_ipx/s_30x50/vue_logo.svg (1ms)                                                                                                             nitro 10:55:27
  ├─ /_payload.js (0ms)                                                                                                                           nitro 10:55:27
✔ You can now deploy .output/public to any static hosting! 

When it runs on Netlify it skips the /_ipx/* routes:

10:57:17 AM: [info] [nitro] Prerendering 3 initial routes with crawler
10:57:18 AM: [log] [nitro]   ├─ / (134ms) 
10:57:18 AM: [log] [nitro]   ├─ /200.html (2ms) 
10:57:18 AM: [log] [nitro]   ├─ /404.html (1ms) 
10:57:18 AM: [log] [nitro]   ├─ /_payload.js (0ms) 
10:57:18 AM: [success] You can now deploy `dist` to any static hosting!

So on Netlify the images are referencing routes that don't exist.

[Achuttarsing]

I have the same problem

[posixpascal]

Oh boy I've struggled with this but somehow managed to at least get it somewhat to work using IPX provider and static rendering for now.

My nuxt config is running on @nuxt/image-edge@^1.0.0-27840416.dc1ed65 using this configuration:

    image: {
        provider: "ipx"
    }

My assets are stored in public (I couldn't get it to work using assets).

I'm working with the following vue component:

<script setup>
const links = [
  { to: "/", name: "Something", image: "images/joystick_3d.png" },
  { to: "/", name: "Something", image: "images/pushpin_3d.png" },
]
</script>
<template>
    <!-- some loop related logic -->
        <NuxtLink :to="link.to" class="nav-link">
          <nuxt-img width="32" :src="link.image" />
          {{ link.name }}
        </NuxtLink>
    <!-- some other logic -->
</template>

This works for me and it successfully generates when running yarn run generate.

  ├─ /_ipx/_/images/logo.svg (3ms)                                                                           nitro 08:13:10
  ├─ /_ipx/w_32/images/joystick_3d.png (131ms)                                                               nitro 08:13:10
  ├─ /_ipx/w_32/images/pushpin_3d.png (6ms)                                                                  nitro 08:13:10
  ├─ /_ipx/w_32/images/slightly_smiling_face_3d.png (7ms)   

However once I add the placeholder property it stops generating assets:

<nuxt-img width="32" :src="link.image" placeholder/>

I think it boils down to the IPX URL having a , in it, i.e.:
without placeholder: /_ipx/q_50/images/slightly_smiling_face_3d.png
with placeholder: /_ipx/q_50,s_10x10/images/slightly_smiling_face_3d.png

Edit 3:
I've opened two PRs, one on @nuxt/image to add URL encoding and another one on nitro to add URL decoding.
This should solve broken URLs when statically generating the site.

• fix(prerender): Encode URLs to preserve "," in X-Nitro-Prerender Header #701
• fix(prerender): decode urls to allow comma in the x-nitro-prerender header nitrojs/nitro#799

[hamidovz]

from docs:

images should be stored in the static/ directory of your project.
For example, when using <nuxt-img src="/nuxt-icon.png" />, it should be placed in static/ folder under the path static/nuxt-icon.png.
Image stored in the assets/ directory are not proccessed with Nuxt Image because those images are managed by webpack.

[alexiokay]

but in nuxt3, it should be public folder