[nuxt3] Static image generation still results in 404 after latest update for certain images only

See original GitHub issue

For some reason images in certain routes are not pre-rendered but not others. This is after #614.

I have found that Nuxt Images with width and height set do not get rendered statically. E.g. <nuxt-img format="avif" class="img-fluid" width="1920" height="1000" :src="imgPath" alt=""></nuxt-img> does not, but <nuxt-img format="avif" class="img-fluid" :src="imgPath" alt=""></nuxt-img> does.

Issue Analytics

  • State:open
  • Created 10 months ago
  • Comments:5

github_iconTop GitHub Comments

6reactions
tex0lcommented, Dec 6, 2022

On my end, it doesn’t work at all, no static image is built. Am I missing something? EDIT: nuxt-img works if I don’t set the dir option and use the default public directory, the documentation specifically says that I should “deploy customized dir, but I don’t know how to do that. But nuxt-picture still doesn’t work

My env:

  • node v18.12.1
  • macOS 13.0.1 (22A400)
  • nuxt@3.0.0
  • @nuxt/image-edge@1.0.0-27827328.bc9ddc0

I use as well (normally unrelated):

  • @nuxt/content@2.2.2
  • nuxt-icon@0.1.8
  • @nuxtjs/tailwindcss@6.1.3 along with @tailwindcss/line-clamp@0.4.2
  • sass@1.56.1

My @nuxt/image-edge config is as follows:

// nuxt.config.ts
  image: {
    dir: 'assets/images'
  }

I use nuxt-picture or nuxt-img like this: <nuxt-img src="image-name.png"/> or <nuxt-picture src="image-name.png" />

And they are rendered as:

<img src="/_ipx/_/image-name.png">

and

<picture>
  <source
    type="image/webp"
    sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
    srcset="/_ipx/w_320,f_webp/image-name.png 320w, /_ipx/w_640,f_webp/image-name.png 640w, /_ipx/w_768,f_webp/image-name.png 768w, /_ipx/w_1024,f_webp/image-name.png 1024w, /_ipx/w_1280,f_webp/image-name.png 1280w, /_ipx/w_1536,f_webp/image-name.png 1536w, /_ipx/w_1536,f_webp/image-name.png 1536w">
  <img
    src="/_ipx/w_1536,f_png/image-name.png"
    sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px"
    srcset="/_ipx/w_320,f_png/image-name.png 320w, /_ipx/w_640,f_png/image-name.png 640w, /_ipx/w_768,f_png/image-name.png 768w, /_ipx/w_1024,f_png/image-name.png 1024w, /_ipx/w_1280,f_png/image-name.png 1280w, /_ipx/w_1536,f_png/image-name.png 1536w, /_ipx/w_1536,f_png/image-name.png 1536w">
</picture>

But in my .output/public there is no _ipx/ directory.

By the way, I get the following error during prerender:

ERROR  (node:20632) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time 
(Use `node --trace-warnings ...` to show where the warning was created)

I don’t know if that’s expected.

4reactions
jimhladcommented, Dec 3, 2022

@jamesxu123 Does this only happen when multiple formatters are applied (e.g. width, height, quality, etc)?

If so just made #673 to hopefully solve this issue. And #674 possibly for the second one.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Images returning 404 on using local images in Nuxt 3 #638
A remote image URL work btw. Happens only with local static images. Build command was set to yarn generate.
Read more >
How to get Nuxt-img to work on nuxt3 generate?
Images work during dev, but get a 404 when using nuxt generate. in my nuxt config i have modules: ["@nuxt/image-edge"], image: { dir:...
Read more >
nuxt-img
Converts src to provider optimized URLs; Automatically resizes images based on width and height; Generates responsive sizes when providing sizes option ...
Read more >
Server-side rendering with Vue and Nuxt.js - LogRocket Blog
Learn about server-side rendering (SSR) and client-side rendering (CSR), how its evolved, and how to use implement it with Nuxt.js and Vue.
Read more >
Creating Server-side Rendered Vue.js Apps Using Nuxt.js
However, Nuxt offers Vue-specific features to create a powerful yet ... nuxt generate ) for creating static generated Vue applications using the same ......
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