feat: add preload functionality

docs/content/en/2.components/1.nuxt-img.md

@@ -186,3 +186,11 @@ Using the `modifiers` prop lets you use any of these transformations.
   :modifiers="{ roundCorner: '0:100' }"
 />
 ```
+
+### `preload`
+
+In case you want to preload the image, use this prop. This will place a corresponding `link` tag in the page's head.
+
+```html
+<nuxt-img preload src="/nuxt-icon.png" />
+```

src/runtime/components/image.mixin.ts

@@ -21,6 +21,7 @@ export const imageMixin = defineMixin({
     provider: { type: String, default: undefined },
 
     sizes: { type: [Object, String] as unknown as () => string | Record<string, any>, default: undefined },
+    preload: { type: Boolean, default: undefined },
 
     // <img> attributes
     width: { type: [String, Number], default: undefined },

src/runtime/components/nuxt-img.vue

@@ -19,6 +19,19 @@ type NAttrs = typeof imageMixin['nImgAttrs'] & {
 export default defineComponent({
   name: 'NuxtImg',
   mixins: [imageMixin],
+  head () {
+    if (this.preload === true) {
+      return {
+        link: [
+          {
+            rel: 'preload',
+            as: 'image',
+            href: this.nSrc
+          }
+        ]
+      }
+    }
+  },
   computed: {
     nAttrs (): NAttrs {
       const attrs: NAttrs = this.nImgAttrs

src/runtime/components/nuxt-picture.vue

@@ -30,6 +30,22 @@ export default defineComponent({
   props: {
     legacyFormat: { type: String, default: null }
   },
+  head () {
+    if (this.preload === true) {
+      const srcKey = typeof this.nSources[1] !== 'undefined' ? 1 : 0
+      const link = {
+        rel: 'preload',
+        as: 'image',
+        imagesrcset: this.nSources[srcKey].srcset
+      }
+      if (typeof this.nSources[srcKey].sizes !== 'undefined') {
+        link.imagesizes = this.nSources[srcKey].sizes
+      }
+      return {
+        link: [link]
+      }
+    }
+  },
   computed: {
     isTransparent (): boolean {
       return ['png', 'webp', 'gif'].includes(this.originalFormat)