feat: allow to specify preload fetch priority

nuxt · Apr 17, 2024 · 0a09d14 · 0a09d14
1 parent e1e1c81
commit 0a09d14
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 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
@@ -87,7 +87,10 @@ export default defineComponent({
                 href: sizes.value.src,
                 imagesizes: sizes.value.sizes,
                 imagesrcset: sizes.value.srcset
-              })
+              }),
+          ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
+            ? { fetchpriority: props.preload.fetchPriority }
+            : {})
         }]
       })
     }

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