feat: allow to specify preload fetch priority

nuxt · Apr 17, 2024 · 4b3a044 · 4b3a044
1 parent e1e1c81
commit 4b3a044
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 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
@@ -81,6 +81,9 @@ export default defineComponent({
           rel: 'preload',
           as: 'image',
           nonce: props.nonce,
+          ...(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
@@ -60,6 +60,9 @@ export default defineComponent({
         rel: 'preload',
         as: 'image',
         imagesrcset: sources.value[0].srcset,
+        ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
+          ? { fetchpriority: props.preload.fetchPriority }
+          : {}),
         nonce: props.nonce
       }