feat: allow to specify preload fetch priority

nuxt · Sep 15, 2023 · 305b813 · 305b813
1 parent 2dfc4b3
commit 305b813
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/playground/pages/provider/[provider].vue b/playground/pages/provider/[provider].vue
@@ -5,7 +5,7 @@
       <br>
       <div class="providerShowcase">
         <div v-for="sample of provider.samples" :key="sample.src">
-          <nuxt-img :provider="provider.name" v-bind="sample" />
+          <nuxt-img :provider="provider.name" v-bind="sample" :preload="{ fetchPriority: 'auto' }" />
           <pre>{{ sample }}</pre>
         </div>
       </div>

diff --git a/src/runtime/components/_base.ts b/src/runtime/components/_base.ts
@@ -20,7 +20,12 @@ export const baseImageProps = {
 
   sizes: { type: [Object, String] as unknown as () => string | Record<string, any>, default: undefined },
   densities: { type: String, default: undefined },
-  preload: { type: Boolean, default: undefined },
+  preload: {
+    type: [Boolean, Object] as unknown as () => boolean | {
+      fetchPriority: 'auto' | 'high' | 'low'
+    },
+    default: undefined
+  },
 
   // <img> attributes
   width: { type: [String, Number], default: undefined },

diff --git a/src/runtime/components/nuxt-img.ts b/src/runtime/components/nuxt-img.ts
@@ -79,6 +79,7 @@ export default defineComponent({
         link: [{
           rel: 'preload',
           as: 'image',
+          ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority ? { fetchpriority: props.preload.fetchPriority } : {}),
           ...(!isResponsive
             ? { href: src.value }
             : {

diff --git a/src/runtime/components/nuxt-picture.ts b/src/runtime/components/nuxt-picture.ts
@@ -54,7 +54,14 @@ export default defineComponent({
     const lastSourceIndex = computed(() => sources.value.length - 1)
 
     if (props.preload) {
-      const link: any = { rel: 'preload', as: 'image', imagesrcset: sources.value[0].srcset }
+      const link: any = {
+        rel: 'preload',
+        as: 'image',
+        imagesrcset: sources.value[0].srcset,
+        ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
+          ? { fetchpriority: props.preload.fetchPriority }
+          : {})
+      }
 
       if (sources.value?.[0]?.sizes) { link.imagesizes = sources.value[0].sizes }