feat(nuxt): sources for <picture> element

Author: johannschopplich

docs/integrations/nuxt.md

@@ -2,6 +2,8 @@
 
 unlazy is not only framework-agnostic, but also provides a Nuxt module that you can use in your Nuxt application.
 
+The auto-imported `UnLazyImage` component is a drop-in replacement for the native `<img>` element and `<picture>` element respectively if you provide the `sources` prop.
+
 ## Installation
 
 Install the `@unlazy/nuxt` package using your favorite package manager:
@@ -91,19 +93,19 @@ The `UnLazyImage` component accepts the following props:
 
 ## Examples
 
-```html
-<!-- Inlined placeholder image as data URI -->
+::: tip
+In every `srcSet` example, the `sizes` attribute is automatically calculated given the `auto-sizes` prop.
+:::
+
+### Inlined placeholder image
+
+```html [Inlined placeholder image]
 <UnLazyImage
   placeholder-src="data:image/svg+xml, ..."
-  src-set="image-320w.jpg 320w, image-640w.jpg 640w"
-  auto-sizes
+  src="/foo/bar.jpg"
 />
 ```
 
-::: tip
-In every `srcSet` example, the `sizes` attribute is automatically calculated given the `auto-sizes` prop.
-:::
-
 ### BlurHash
 
 ::: code-group
@@ -151,3 +153,33 @@ In every `srcSet` example, the `sizes` attribute is automatically calculated giv
   />
   ```
 :::
+
+### Multiple image sources
+
+In this example, we're using the `UnLazyImage` component with an `exampleImgSrc` for the default image source, and an array of objects named `exampleSources` for the `sources` prop. Each object in the array includes a `type` and a `srcSet` property. In addition, the `blurhash` attribute is set to a predefined BlurHash string, and the `autoSizes` attribute is set to `true`, which will enable automatic calculation of the `sizes` attribute.
+
+```vue
+<script setup lang="ts">
+import UnlazyImg from 'unlazy/UnlazyImg.vue'
+
+const exampleImgSrc = '/images/foo.jpg'
+const exampleSources = [
+  {
+    type: 'image/webp',
+    srcSet: '/images/foo.webp 1x, /images/foo@2x.webp 2x'
+  },
+  {
+    type: 'image/jpeg',
+    srcSet: '/images/foo.jpg 1x, /images/foo@2x.jpg 2x'
+  }
+]
+</script>
+
+<template>
+  <UnLazyImage
+    :src="exampleImgSrc"
+    :sources="exampleSources"
+    blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
+    auto-sizes
+  />
+</template>

packages/nuxt/playground/app.vue

@@ -27,8 +27,7 @@ function loadImage() {
           <PlaygroundDivider><strong>SSR</strong>-decoded BlurHash</PlaygroundDivider>
           <UnLazyImage
             :blurhash="blurhash"
-            :blurhash-ratio="2"
-            data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+            src-set="image-320w.jpg 320w, image-640w.jpg 640w"
             width="640"
             height="320"
           />
@@ -41,8 +40,7 @@ function loadImage() {
           <UnLazyImage
             :ssr="false"
             :blurhash="blurhash"
-            :blurhash-ratio="2"
-            data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+            src-set="image-320w.jpg 320w, image-640w.jpg 640w"
             width="640"
             height="320"
           />
@@ -57,7 +55,7 @@ function loadImage() {
           <PlaygroundDivider><strong>SSR</strong>-decoded ThumbHash</PlaygroundDivider>
           <UnLazyImage
             :thumbhash="thumbhash"
-            data-src="/images/sunrise-evan-wallace.jpg"
+            src="/images/sunrise-evan-wallace.jpg"
             width="480"
             height="640"
             style="aspect-ratio: 3/4;"
@@ -72,7 +70,7 @@ function loadImage() {
           <UnLazyImage
             :ssr="false"
             :thumbhash="thumbhash"
-            data-src="/images/sunrise-evan-wallace.jpg"
+            src="/images/sunrise-evan-wallace.jpg"
             width="480"
             height="640"
             style="aspect-ratio: 3/4;"
@@ -86,9 +84,10 @@ function loadImage() {
           <UnLazyImage
             thumbhash="HBkSHYSIeHiPiHh8eJd4eTN0EEQG"
             :lazy-load="shouldLoadImage"
-            data-src="/images/fall-evan-wallace.jpg"
+            src="/images/fall-evan-wallace.jpg"
             width="480"
             height="640"
+            style="aspect-ratio: 3/2;"
             @click="loadImage"
           />
           <p class="text-sm text-gray-500">

packages/nuxt/src/runtime/components/UnLazyImage.vue

@@ -7,7 +7,16 @@ import { onBeforeUnmount, onMounted, ref, useRuntimeConfig, watchEffect } from '
 
 const props = withDefaults(
   defineProps<{
+    /** Image source URL to be lazy-loaded. */
     src?: ImgHTMLAttributes['src']
+    /** Image source set to be lazy-loaded. */
+    srcSet?: ImgHTMLAttributes['srcset']
+    /** Image source URLs for different resolutions. This will render the `<picture>` element instead of `<img>`. */
+    sources?: {
+      type: string
+      srcSet: string
+      sizes?: string
+    }[]
     /**
      * A flag to indicate whether the sizes attribute should be automatically calculated.
      * @default false
@@ -17,6 +26,8 @@ const props = withDefaults(
     blurhash?: string
     /** A ThumbHash string representing the blurry placeholder image. */
     thumbhash?: string
+    /** Optional image source URL for a custom placeholder image. Will be ignored if a BlurHash or ThumbHash is provided. */
+    placeholderSrc?: string
     /** The size of the longer edge (width or height) of the BlurHash image to be decoded, depending on the aspect ratio. This option only applies when the `blurhash` prop is used. */
     placeholderSize?: number
     /** Aspect ratio (width / height) of the decoded BlurHash image. Only applies to SSR-decoded placeholder images from a BlurHash string. */
@@ -31,9 +42,12 @@ const props = withDefaults(
   }>(),
   {
     src: undefined,
+    srcSet: undefined,
+    sources: undefined,
     autoSizes: false,
     blurhash: undefined,
     thumbhash: undefined,
+    placeholderSrc: undefined,
     placeholderSize: undefined,
     placeholderRatio: undefined,
     lazyLoad: true,
@@ -85,9 +99,29 @@ onBeforeUnmount(() => {
 
 <template>
   <img
+    v-if="!props.sources?.length"
     ref="target"
-    :src="pngPlaceholder || src"
+    :src="pngPlaceholder || placeholderSrc"
+    :data-src="src"
+    :data-srcset="srcSet"
     :data-sizes="autoSizes ? 'auto' : undefined"
     loading="lazy"
   >
+  <picture v-else>
+    <source
+      v-for="(source, index) in props.sources"
+      :key="index"
+      :type="source.type"
+      :data-srcset="source.srcSet"
+      :data-sizes="source.sizes"
+    >
+    <img
+      ref="target"
+      :src="pngPlaceholder || placeholderSrc"
+      :data-src="src"
+      :data-srcset="srcSet"
+      :data-sizes="autoSizes ? 'auto' : undefined"
+      loading="lazy"
+    >
+  </picture>
 </template>