image: `nuxt generate` Does Not Generate Transformed Images When Deployed On Vercel

I am hosting my Nuxt project on Vercel, and using nuxt generate to create a static build. This works as expected on my machine, but on the Vercel deployment, no images are generated. The original files are available under their respective URL, but any transformed versions, which should be generated by the image module and available under a URL like /_vercel/image?url=/images/example.jpg&w=1280&q=100 simply do not exist.

I searched online for this problem, but the only thing I found was this issue from 2021, which describes - as far as I can tell - the same problem, but with Nuxt 2 and Nuxt Image < 1.0, which does not help me very much.

I have a completely empty image configuration and no route specific rendering rules. Using nuxt build works perfectly fine, and - as I said - nuxt generate does work on my machine. It just does not work when deployed on Vercel.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 8
Comments: 32 (2 by maintainers)

Most upvoted comments

Has anyone made any progress on this? Having the same issue on Netlify.

lioneaglesolutions on Mar 23, 2023

Temporary solution: For the time being, set the provider explicitly to ipx in your nuxt.config.ts file:

export default defineNuxtConfig({
    modules: [
        '@nuxt/image-edge'
    ],
    image: {
        provider: 'ipx'
    }
}

alexgrozav on Apr 13, 2023

@danielroe what am I missing?

I have updated to the latest version of nuxt as well as the image component:

"devDependencies": {
    "nuxt": "^3.6.1"
  },
  "dependencies": {
    "@nuxt/image": "^1.0.0-rc.1"
  }

After deployment, I still get the following: https://[redacted].vercel.app/_vercel/image?url=/img/sample.jpg&w=640&q=100, even though my image component looks like this:

<nuxt-img src="/img/sample.jpg" width="500" format="webp" />

(conf:

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
});

)

tpiros on Jul 4, 2023

Also having issues getting images generated on Vercel when using nuxt generate. Images work locally, but not on Vercel.

andrew-boyd on Mar 5, 2023

Issue still present

letoast on Jun 2, 2023

Same problem but in Netlify

azamat-747 on Mar 17, 2023

Hey y’all.

I’ve put together a minimal working example for the bug we’re experiencing right here. From what I can tell, it’s not an issue with Vercel in particular (since I first found it on GitHub Pages and I’m able to reproduce it locally), most likely something to do with how Nuxt Image generates static paths.

GuiArcencio on Mar 17, 2023

Hi !

I am experiencing the same issue. Urls in production lead to 404 pages.

girardinsamuel on Mar 10, 2023