question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nuxt Generate does not produce images

See original GitHub issue

Nuxt version: 2.15.3 @nuxt/image version: 0.4.4 target: ‘static’

I have been using the module in dev mode with no problems. However, when trying to generate a static site using nuxt generate no images are produced by @nuxt/image and all images on the site 404. The generated image URLs point to _ipx/IMAGE_PATH but this is not in the dist folder of the Nuxt project.

I have tried with a fresh Nuxt project with only @nuxt/image added and get exactly the same issue. Running nuxt generate produces no errors in the CLI and the site builds without a problem. The images are just not generated.

Any help on this would be greatly appreciated.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:18 (6 by maintainers)

github_iconTop GitHub Comments

7reactions
tusamnicommented, Apr 20, 2021

For what it’s worth I was able to get it working on local dev with “npm run generate” and on Vercel with the following config:

buildModules: [
    // Next Image module https://image.nuxtjs.org/components/nuxt-img
    ['@nuxt/image', {
        provider: 'static',
        dir: "assets/images",
    }],
],
6reactions
michealrobertscommented, Sep 28, 2021

I can confirm as per @danielroe 's suggestions you need to have both ssr: true and target: static set in your nuxt.config.js for this to work. (Confirmed to be working with Vercel, Netlify and Layer0 and local development for static content.)

Someone should document this. (Shuffles away into the darkness).

Read more comments on GitHub >

github_iconTop Results From Across the Web

npm run generate does not produce images for static page
Nuxt is a JavaScript framework for creating Universal Vue.js ... r/Nuxt - Help needed - npm run generate does not produce images for...
Read more >
No images on Nuxt static site after running npm run generate
There are two main ways to display images through nuxt. One via the assets folder, the other via the static folder.
Read more >
Commands and Deployment - Nuxt
Nuxt comes with a set of useful commands, both for development and production purpose.
Read more >
Nuxt Image doesnt show up after deploy - Support
I am having the same issue. I have deployed Nuxt3 app on Netlify and the images don't load. I was using the latest...
Read more >
Overview - Nuxt Optimized Images - Docs | Julio Marquez
You have to install the optimization packages you need in your project in addition to this module. Then, @aceforth/nuxt-optimized-images detects all the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found