feat: allow specifying fetchpriority when preloading images (#989)

nuxt · May 2, 2024 · b29cb33 · b29cb33
1 parent 5262730
commit b29cb33
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/playground/pages/provider/[provider].vue b/playground/pages/provider/[provider].vue
@@ -11,6 +11,7 @@
           <nuxt-img
             :provider="provider.name"
             v-bind="sample"
+            :preload="{ fetchPriority: 'auto' }"
           />
           <pre>{{ sample }}</pre>
         </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
@@ -96,6 +96,9 @@ export default defineComponent({
                 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
@@ -64,6 +64,9 @@ export default defineComponent({
         as: 'image',
         imagesrcset: sources.value[0].srcset,
         nonce: props.nonce,
+        ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
+          ? { fetchpriority: props.preload.fetchPriority }
+          : {}),
       }
 
       if (sources.value?.[0]?.sizes) {