feat: support prerendering static images

[pi0]

With this PR we add nuxi generate support for Nuxt 3 images to be optimized on build time.

TODO: Find a more stable way set ipx images path during prerendering

[netlify]

✅ Deploy Preview for nuxt-image-v1 ready!

Name	Link
🔨 Latest commit	6f03cbe
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-image-v1/deploys/637e41aef2c6e800097994a5
😎 Deploy Preview	https://deploy-preview-614--nuxt-image-v1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[alexanderhorner]

Hey, are you making progress on this? Do you know when this will be released?

[jimhlad]

@pi0 Happy to help test this out once it's merged. Or if there's a way to install Nuxt image from PR / commit hash.

[jimhlad]

Attempted to continue some of the work here #629 .

Playground seems to be working locally but my knowledge of the Nuxt framework isn't that deep, so I defer to the Nuxt team on whether it is useful.

[alexanderhorner]

If it works, merge it

[kissu]

Related SO question: https://stackoverflow.com/q/74178950/8816585

[jpengelbrecht]

++. would be great to get this in when possible

[jimhlad]

Also noticed that because the X-Nitro-Prerender header uses a comma as a delimiter to separate URLs, and certain providers (e.g. IPX) also use a comma to separate arguments, that this implementation isn't working when there is more than one formatter applied.

Example Working:

X-Nitro-Prerender /_ipx/w_320/img/example.jpg,/_ipx/w_320/img/another.jpg

Example Broken:

X-Nitro-Prerender /_ipx/w_320,f_webp,q_80/img/example.jpg,/_ipx/w_320,f_webp,q_80/img/another.jpg

Attempted to fix here by changing IPX to use & (not sure if this is the best way) and updated the playground to check for it: e78cb9c (part of PR #629)

Edit: Replaced with the underscore character "_" for the joinWith value for cleaner directory names.

[jimhlad]

Fixed another small issue with srcset values not being trimmed: 4cb6294 (PR #629 )

[fayazara]

@pi0 Any update on this one?

@jimhlad Any workaround to get this working in SSG mode?

[jimhlad]

@fayazara Depending on how badly you need it, you could move @nuxt/image-edge folder from node_modules into your own vendor directory, make the changes you need (e.g. mirror the changes from @pi0 or my PR), and then pull it in via package.json:

"@nuxt/image-edge": "./vendor/image-edge",

Disclaimer: Before I get a lot of thumbs down, I'm not recommending this as a good or long-term solution. Since you'll have to undo these changes later to revert back to the main package.

The best thing may be to wait for @pi0 since I noticed several other things that weren't quite ready yet (e.g. using the $img utility).

[fayazara]

@fayazara Depending on how badly you need it, you could move @nuxt/image-edge folder from node_modules into your own vendor directory, make the changes you need (e.g. mirror the changes from @pi0 or my PR), and then pull it in via package.json:

"@nuxt/image-edge": "./vendor/image-edge",

Disclaimer: Before I get a lot of thumbs down, I'm not recommending this as a good or long-term solution. Since you'll have to undo these changes later to revert back to the main package.

The best thing may be to wait for @pi0 since I noticed several other things that weren't quite ready yet (e.g. using the $img utility).

@jimhlad
I can generate the image responsive breakpoints manually for, but this keeps failing too.

    <img
      sizes="(max-width: 1400px) 100vw, 1400px"
      srcset="
        /images/home/hero/dashboard-app_p265ea_c_scale,w_200.png   200w,
        /images/home/hero/dashboard-app_p265ea_c_scale,w_499.png   499w,
        /images/home/hero/dashboard-app_p265ea_c_scale,w_709.png   709w,
        /images/home/hero/dashboard-app_p265ea_c_scale,w_912.png   912w,
        /images/home/hero/dashboard-app_p265ea_c_scale,w_1084.png 1084w,
        /images/home/hero/dashboard-app_p265ea_c_scale,w_1400.png 1400w
      "
      src="/images/home/hero/dashboard-app_p265ea_c_scale,w_1400.png"
      alt="Dashboard"
      class="rounded-lg container-shadow"
    />

Production build breaks when I run yarn generate with this error.

 ERROR  [vite]: Rollup failed to resolve import "w_200.png" from "components/Home/DashboardPreview.vue".                                       23:59:04

[jimhlad]

Hmmm not sure then. I'm using the <nuxt-img> tag like so with the changes from my PR #629 :

<nuxt-img
  src="/img/sample-image.jpg"
  alt="Sample Image"
  sizes="xs:100vw lg:50vw xl:574px 2x:1148px"
  quality="70"
  format="webp"
  class="w-full lg:-mt-8"
/>

Then npm run generate fetches them into an _ipx folder.

[fayazara]

Hmmm not sure then. I'm using the <nuxt-img> tag like so with the changes from my PR #629 :

<nuxt-img
  src="/img/sample-image.jpg"
  alt="Sample Image"
  sizes="xs:100vw lg:50vw xl:574px 2x:1148px"
  quality="70"
  format="webp"
  class="w-full lg:-mt-8"
/>

Then npm run generate fetches them into an _ipx folder.

@jimhlad turns out it's a bug in vite, if URLs have a comma in them, it wont get resolved.

[rrangerCDV]

Waiting for this PR like christmas 🎅

[shtief]

Waiting for this PR like christmas santa

I hope it comes before christmas

[Achuttarsing]

please release this feature 🙏

[brunodeangelis]

I'm sorry, what is preventing this PR from being merged?

[timb-103]

Please make it work on static generation :)

[jeannen]

Is this live already? I just created a project with Nuxt Content + Nuxt Image, and all the images in my markdown files returning a 404 error when doing npm run generate