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

[piet-maier]

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.

[andrew-boyd]

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

[girardinsamuel]

Hi !

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

[luksak]

Same here.

[GuiArcencio]

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.

[azamat-747]

Same problem but in Netlify

[lioneaglesolutions]

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

[graydoubt]

https://github.com/nuxt/image/pull/788 has been merged. I believe that addresses this issue.

[luksak]

So far this hasn't fixed the issue for me. Can someone else confirm this?

[tpiros]

I'm running the following versions

 "@nuxt/image-edge": "^1.0.0-28008586.381b906",
 "nuxt": "^3.3.3"

When deploying to Vercel - regardless of having a width prop added to <nuxt-img> I always get a different width once deployed.

So essentially this: <nuxt-img src="/img/sample.jpg" width="500" format="webp" /> generates this: https://....vercel.app/_vercel/image?url=/img/sample.jpg&w=640&q=100 which is not correct.

[piet-maier]

This issue still persists on my deployments. See the following links for an example.

https://github.com/piet-maier/vercel-image-bug https://vercel-image-bug.vercel.app/

[luksak]

Could a maintainer please re-open this issue?

[alexgrozav]

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'
    }
}

[danielroe]

This will be resolved in the next Nitro release after https://github.com/unjs/nitro/pull/1073.

[tpiros]

Thanks @danielroe - what's the timeline for that?

[luksak]

Ok, that PR was released yesterday. I updated nitro, but no luck so far. Is there anything missing?

[LukaZeleznik]

I am also experiecing the issue still, even when deploying a site using vercel-static preset (with nuxt generate).

[heychazza]

Still experiencing this issue too..

[tpiros]

@danielroe this issue still exists - I have updated my project and now when deploying I can see the following versions: Nuxt 3.4.3 with Nitro 2.4.0.

Yet when I have <nuxt-img src="/img/sample.jpg" width="500" format="webp" /> in my code, I still get this response: https://**.app/_vercel/image?url=/img/sample.jpg&w=640&q=100.

Any further advice? Cheers

[hecktarzuli]

Me too, using Nuxt 3.5.0, and nuxt/image-edge

[brunodeangelis]

@danielroe this issue still exists - I have updated my project and now when deploying I can see the following versions: Nuxt 3.4.3 with Nitro 2.4.0.

Yet when I have <nuxt-img src="/img/sample.jpg" width="500" format="webp" /> in my code, I still get this response: https://**.app/_vercel/image?url=/img/sample.jpg&w=640&q=100.

Any further advice? Cheers

I have this same situation.

[letoast]

Issue still present

[Smef]

I was running into this issue with Cloudflare Pages. I'm not sure if Vercel or Netlify are running a regular node environment in these situation, but forcing the nitro config to true allowed this to process successfully in Cloudflare Pages due to a node environment check built into Nuxt Image. It may be worth a try here.

https://github.com/nuxt/image/issues/866#issuecomment-1588284530

export default defineNuxtConfig({
    nitro: {
        node: true,
    },
})

[DanSuthWMW]

I was using an /images folder inside /public which was the issue, so my image path locally were /public/images/image.jpg this was causing 404's when deploying to Vercel on the Vercel provider, even when setting the dir property in config to account for the images directory. When moving all my images back to the base /public directory it worked on a static Vercel deployment. I haven't played with the staticFilename config property to see if I could introduce the sub-directory for Vercel deployments that way but this certainly resolved the Vercel 404 issue for me.

[luksak]

@danielroe works like a charm! Thank you ❤️

[danielroe]

Fantastic!!

[tpiros]

@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'],
});

)

[arkaroy135]

I faced the same issue. To solve this, I moved all the image resources to the public/ directory from assets/ directory. I know it's a temporary solution but it worked.

[tpiros]

@arkaroy135 I do have the images in the public/ folder. The documentation also states that

src should be in the form of an absolute path for static images in public/ directory. Otherwise path that is expected by provider that starts with / or a URL.

@luksak you mentioned that after the upgrade you managed to get this to work - can I correlate my versions & setup with yours? I'm really unsure what I'm doing wrong.

[brunodeangelis]

@arkaroy135 I do have the images in the public/ folder. The documentation also states that

src should be in the form of an absolute path for static images in public/ directory. Otherwise path that is expected by provider that starts with / or a URL.

@luksak you mentioned that after the upgrade you managed to get this to work - can I correlate my versions & setup with yours? I'm really unsure what I'm doing wrong.

Haven't tested myself but seems like the latest version is rc.2? Have you tried that?

[luksak]

@tpiros I'm running on this:

    "@nuxt/image-edge": "^1.0.0-rc.1-28139579.37395b7",
    "nuxt": "^3.6.2",

Here is the live site: https://bruggisserpartner.ch/

It was fixed in nuxt 3.6.0 and a recent release of nitro.

[madebyfabian]

@luksak I still cannot get it to work. What's your nuxt.config.ts? I cannot get it work work with:

        "@nuxt/image-edge": "1.0.0-rc.1-28143901.afe4120",
        "nuxt": "^3.6.5",

My nuxt.config.ts:

import { screensConfigAsNumbers } from './tailwind.config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: true },

    experimental: {
        typedPages: true,
        /** @see https://github.com/nuxt/nuxt/issues/22068#issuecomment-1635347712 */
        payloadExtraction: true,
    },

    modules: [
        '@nuxtjs/tailwindcss',
        'nuxt-svgo',
        'nuxt-graphql-middleware',
        '@nuxt/image-edge',
    ],

    runtimeConfig: {
        gqlHost: process.env.NUXT_GQL_HOST,
        gqlToken: process.env.NUXT_GQL_TOKEN,
        public: {
            wpHost: process.env.NUXT_PUBLIC_WP_HOST,
        },
    },

    routeRules: {
        '/**/*': { prerender: true },
    },

        // ...

    // @nuxt/image
    image: {
        domains: [process.env.NUXT_PUBLIC_WP_HOST || ''],
        provider: 'ipx',
        screens: {
            ...screensConfigAsNumbers,
        },
    },
})

[luksak]

@madebyfabian you set provider: 'ipx', which is not correct.

[chaderenyore]

Hey all I'm having a similar issue, though not on production but on local environment. I have nuxt-booster installed, but when I use NuxtImage I don't get the path, rather I have IPX attached to it at the beginning which results to the file not being found.

srcset="/_ipx/_/item.img 1x, /_ipx/_/item.img 2x"

Urgently looking for solutions.

[danielroe]

Does that occur with out that module?

[chaderenyore]

Hi Daniel, I think the issue was from nuxt booster not directly installing nuxt image. So instead of using nuxt image I used The BoosterImage component and it works well now.