feat(image): add preload

Author: manuelodelain

components/molecules/VImg/Preload.stories.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const imageProps = {
+    src: '01.jpg',
+    width: 900,
+    height: 600,
+    alt: 'Image alt text',
+    provider: 'interventionRequest',
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <VImg v-bind="imageProps" preload />
+    </NuxtStory>
+</template>

components/molecules/VImg/PreloadResponsive.stories.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const imageProps = {
+    src: '01.jpg',
+    width: 900,
+    height: 600,
+    alt: 'Image alt text',
+    provider: 'interventionRequest',
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <VImg v-bind="imageProps" preload sizes="xs:100vw md:100vw xl:100vw" />
+    </NuxtStory>
+</template>

components/molecules/VImg/VImg.vue

@@ -88,7 +88,6 @@ export default defineComponent({
                 })
             )
         })
-
         const internalSizes = computed(() => {
             const result = responsiveImageData.value?.sizes
 
@@ -97,6 +96,31 @@ export default defineComponent({
             return result
         })
 
+        // @see https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-img.ts
+        if (props.preload) {
+            const isResponsive = responsiveImageData.value && Object.values(responsiveImageData.value).every((v) => v)
+
+            useHead({
+                link: [
+                    {
+                        rel: 'preload',
+                        as: 'image',
+                        nonce: props.nonce,
+                        ...(!isResponsive
+                            ? { href: src.value }
+                            : {
+                                  href: responsiveImageData.value.src,
+                                  imagesizes: responsiveImageData.value.sizes,
+                                  imagesrcset: responsiveImageData.value.srcset,
+                              }),
+                        ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
+                            ? { fetchpriority: props.preload.fetchPriority }
+                            : {}),
+                    },
+                ],
+            })
+        }
+
         return () =>
             h('img', {
                 src: src.value,

components/molecules/VPicture/Preload.stories.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const imageProps = {
+    src: '01.jpg',
+    width: 900,
+    height: 600,
+    alt: 'Image alt text',
+    provider: 'interventionRequest',
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <VPicture v-bind="imageProps" preload />
+    </NuxtStory>
+</template>

components/molecules/VPicture/PreloadSource.stories.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const imageProps = {
+    src: '01.jpg',
+    width: 900,
+    height: 600,
+    alt: 'Image alt text',
+    provider: 'interventionRequest',
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <VPicture v-bind="imageProps" preload>
+            <VPictureSource :modifiers="{ crop: '400x600' }" media="(max-width: 1024px)" />
+        </VPicture>
+    </NuxtStory>
+</template>

components/molecules/VPicture/VPictureSource.vue

@@ -2,6 +2,7 @@
 import type { MaybeRefOrGetter, PropType } from 'vue'
 import type { ImageOptions } from '@nuxt/image'
 import type { VPictureProps } from '~/components/molecules/VPicture/VPicture.vue'
+import type { Head } from '@unhead/schema'
 
 const props = defineProps({
     media: String,
@@ -14,6 +15,11 @@ const props = defineProps({
     width: String,
     height: String,
     modifiers: Object as PropType<Record<string, any>>,
+    preload: {
+        type: [Boolean, Object] as PropType<boolean | { fetchPriority?: 'auto' | 'high' | 'low' }>,
+        default: undefined,
+    },
+    nonce: String,
 })
 
 const pictureProps = inject<MaybeRefOrGetter<VPictureProps>>('pictureProps')
@@ -94,6 +100,28 @@ const sources = computed(() => {
         }
     })
 })
+
+// @see https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-picture.ts
+const picturePropsValue = toValue<VPictureProps>(pictureProps)
+const preload = props.preload || (typeof props.preload === 'undefined' && picturePropsValue.preload)
+
+if (preload) {
+    const link: NonNullable<Head['link']>[number] = {
+        rel: 'preload',
+        as: 'image',
+        imagesrcset: sources.value[0].srcset,
+        nonce: props.nonce,
+        ...(typeof props.preload !== 'boolean' && preload.fetchPriority
+            ? { fetchpriority: preload.fetchPriority }
+            : {}),
+    }
+
+    if (sources.value?.[0]?.sizes) {
+        link.imagesizes = sources.value[0].sizes
+    }
+
+    useHead({ link: [link] })
+}
 </script>
 
 <template>