Build & preview works fine (optimized images) locally, but not on netlify

[TechAkayy]

When I build & preview my app locally, the optimized images (unsplash) are loading just fine.

But when deployed to netlify, they images are missing. I'm not sure if this is a bug (or) if I'm missing any config (plz correct me if so). Thanks for looking into this.

Here is my repo - https://github.com/TechAkayy/happy-paws-with-nuxt-tailwindcss Prod - https://legendary-melomakarona-0f405b.netlify.app/

Dependencies Info

Run npx nuxi info and pnpm list (or npm list) and provide the output:

- Operating System: `Darwin`
- Node Version:     `v18.12.1`
- Nuxt Version:     `3.6.5`
- Nitro Version:    `2.5.2`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `runtimeConfig`, `modules`, `pinegrow`, `css`, `postcss`, `image`, `content`, `unocss`, `pinia`, `imports`
- Runtime Modules:  `@pinegrow/[email protected]`, `@unocss/[email protected]`, `@nuxt/[email protected]`, `@vueuse/[email protected]`, `@pinia/[email protected]`, `@nuxtjs/[email protected]`, `@nuxt/[email protected]`
- Build Modules:    `-`

[email protected] /Users/techakayy/Templates/happy-paws-with-nuxt-tailwindcss
├── @iconify/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxtjs/[email protected]
├── @pinegrow/[email protected]
├── @pinegrow/[email protected]
├── @pinia/[email protected]
├── @tailwindcss/[email protected]
├── @tailwindcss/[email protected]
├── @types/[email protected]
├── @unocss/[email protected]
├── @unocss/[email protected]
├── @vue/[email protected]
├── @vueuse/[email protected]
├── @vueuse/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Local: npm run now (build & preview)

Production (on netlify)

Here is my netlify deploy config

[TechAkayy]

I have another Vuetify/Unocss based sample app, that uses useImage() and v-img (as per docs - https://image.nuxt.com/usage/use-image) instead of NuxtPicture & NuxtImg, and it works fine in netlify deploy.

My understanding is they (NuxtPicture & useImage) are essentially the same, but looks like there is some gap that I'm still missing.

Github - https://github.com/pinegrow/pg-nuxt-vuetify-tailwindcss Netlify - https://pg-nuxt-vuetify-tailwindcss.netlify.app/

[jrusi]

I have the same issue... I'm using NuxtImg and all the images are missing (everything works locally). When I copy the missing img url and paste it in a browser I get: {"error":{"message":"[404] [IPX_FILE_NOT_FOUND] File not found: /logo.png"}}

[Zielgestalt]

Tried to use useImage, but without vuetify. Didn't worked for me on netlify.

[TechAkayy]

Yeah something seems to be missing.. Hope this gets into the maintainers radar soon :-)

[TechAkayy]

I tried deploying nuxt image's playground on netlify. While it worked fine when previewing locally, on netlify it didn't work. Looks like there needs to be some nitro-related additional setup required to make it work. Will wait for it, fingers crossed!

Netlify - https://elaborate-cucurucho-09eef4.netlify.app/provider/ipx

[cfab]

You need to pass this in you nuxt.config image: { // Options provider: 'netlify', netlify: { baseURl: 'https://xxxxx.netlify.app' } }, don't know why, but it works ! found here: https://github.com/nuxt/image/issues/936

[TechAkayy]

Thanks @cfab. It helps when building the app using the build command (SSR), but doesn't seem to work when prerendering by using the generate command (SSG).

[cfab]

Ok, but I just generated locally and updated ./output/public to netlify with https://app.netlify.com/drop and everything is working, images included... Then to be sure, I've tried to deploy through Netlify UI with the "trigger deploy" button. I had before adjusted my deploy settings for the "publish directory" to "dist" and the "build command" to "yarn run generate". And it works also included images !

[TechAkayy]

Thanks @cfab, I will do some deep testing to understand and share my samples with the community 👍🏽

[cfab]

But you're right, images are loaded but they are not "managed" by IPX, they are served as original file (size and format) and just added a query string... for example this code

<nuxt-img src="/images/simone2.jpg" width="500" format="auto" alt="xxx" class="mt-8" />

become this on production on netlify (not static but with build command)

<img src="https://xxx.ch/images/simone2.jpg?w=500&amp;nf_resize=fit" onerror="this.setAttribute('data-error', 1)" width="500" alt="xxx" data-nuxt-img="" srcset="https://xxx.ch/images/simone2.jpg?w=500&amp;nf_resize=fit 1x, https://xxx.ch/images/simone2.jpg?w=1000&amp;nf_resize=fit 2x" class="mt-8" data-v-1cdd619f="">

in my nuxt config I have this:

image: { provider: 'netlify', netlify: { baseURL: 'https://xxx.ch' } }, And I'm using latest version of nuxt 3.8.2 and latest version of @nuxt/image (1.1.0)

Any help or working example @danielroe ?

[cfab]

Any news on this ? I'd prefer to use IPX than the new netlify image service if that is possible... So my question is simple: can we use ipx on netlify currently (with build command, not generate) ? If it is not possible, well ok ;-) But if it is possible, can you provide a basic config example ? Thank you!