image feat: support prerendering static images

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

Sep 13 '22 17:09 pi0

Deploy Preview for nuxt-image-v1 ready!

Name	Link
Latest commit	6f03cbe2ca2711cbb73c20a66bc777534afc8b5c
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.

Sep 13 '22 17:09 netlify[bot]

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

Sep 24 '22 14:09 alexanderhorner

@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.

Sep 24 '22 15:09 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.

Oct 08 '22 16:10 jimhlad

If it works, merge it

Oct 10 '22 10:10 alexanderhorner

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

Oct 25 '22 13:10 kissu

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

Oct 31 '22 08:10 jpengelbrecht

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: https://github.com/nuxt/image/pull/629/commits/e78cb9c25e8ebfb4bd6eaff85911c1e713b7e47a (part of PR #629)

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

Nov 02 '22 00:11 jimhlad

Fixed another small issue with srcset values not being trimmed: https://github.com/nuxt/image/pull/629/commits/4cb6294e5ceeddd717b3f50acd9e7f08114a5e82 (PR #629 )

Nov 02 '22 23:11 jimhlad

@pi0 Any update on this one?

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

Nov 09 '22 17:11 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).

Nov 09 '22 17:11 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).

@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

Nov 09 '22 18:11 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.

Nov 10 '22 00:11 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.

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

Nov 10 '22 10:11 fayazara

Waiting for this PR like christmas :santa: