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: `npm@8.19.2` - Builder: `vite` - User Config: `runtimeConfig`, `modules`, `pinegrow`, `css`, `postcss`, `image`, `content`, `unocss`, `pinia`, `imports` - Runtime Modules: `@pinegrow/nuxt-module@3.0.19`, `@unocss/nuxt@0.54.3`, `@nuxt/content@2.8.2`, `@vueuse/nuxt@10.3.0`, `@pinia/nuxt@0.4.11`, `@nuxtjs/html-validator@1.5.2`, `@nuxt/image@1.0.0-rc.2` - Build Modules: `-` happy-paws-with-nuxt-tailwindcss@0.0.0 /Users/techakayy/Templates/happy-paws-with-nuxt-tailwindcss ├── @iconify/json@2.2.102 ├── @nuxt/content@2.8.2 ├── @nuxt/devtools@0.7.6 ├── @nuxt/eslint-config@0.1.1 ├── @nuxt/image@1.0.0-rc.2 ├── @nuxtjs/html-validator@1.5.2 ├── @pinegrow/nuxt-module@3.0.19 ├── @pinegrow/tailwindcss-plugin@3.0.17 ├── @pinia/nuxt@0.4.11 ├── @tailwindcss/forms@0.5.4 ├── @tailwindcss/typography@0.5.9 ├── @types/node@20.5.0 ├── @unocss/nuxt@0.54.3 ├── @unocss/preset-icons@0.54.3 ├── @vue/devtools@6.5.0 ├── @vueuse/core@10.3.0 ├── @vueuse/nuxt@10.3.0 ├── autoprefixer@10.4.15 ├── eslint-config-prettier@8.10.0 ├── eslint@8.47.0 ├── npm-run-all@4.1.5 ├── nuxt@3.6.5 ├── pinia@2.1.6 ├── postcss@8.4.28 ├── prettier@2.8.8 ├── rehype-external-links@2.1.0 ├── tailwindcss@3.3.3 └── typescript@5.1.6 ```

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

`

`

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

`

`

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!