nuxt / nuxt/image

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

Open
#999 11 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

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)

image

Production (on netlify)

image

Here is my netlify deploy config
image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the linked happy-paws-with-nuxt-tailwindcss deployment with the listed Nuxt, @nuxt/image, and Netlify configuration. Compare optimized image requests in local build-and-preview with production, then confirm the cause and document a configuration or deployment change that makes the images load on Netlify.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs, tailwindcss
Domain
cloud, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.