fix(vue,nuxt): calc sizes when preload is set

Fixes #27

Author: johannschopplich

packages/nuxt/src/runtime/components/UnLazyImage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { createPlaceholderFromHash, lazyLoad, loadImage } from 'unlazy'
+import { createPlaceholderFromHash, lazyLoad, loadImage, updateSizesAttribute } from 'unlazy'
 import type { ImgHTMLAttributes } from 'vue'
 import type { ModuleOptions } from '../../module'
 import { computed, onBeforeUnmount, ref, useRuntimeConfig, watchEffect } from '#imports'
@@ -104,6 +104,15 @@ watchEffect(() => {
   }
 
   if (props.preload) {
+    updateSizesAttribute(target.value)
+
+    // Calculate the `sizes` attribute for sources inside a `<picture>` element
+    if (target.value.parentElement?.tagName.toLowerCase() === 'picture') {
+      [...target.value.parentElement.getElementsByTagName('source')].forEach(
+        sourceTag => updateSizesAttribute(sourceTag),
+      )
+    }
+
     loadImage(target.value)
     return
   }

packages/vue/src/components/UnLazyImage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watchEffect } from 'vue'
-import { lazyLoad, loadImage } from 'unlazy'
+import { lazyLoad, loadImage, updateSizesAttribute } from 'unlazy'
 import type { ImgHTMLAttributes } from 'vue'
 
 const props = defineProps<{
@@ -38,6 +38,15 @@ watchEffect(() => {
     return
 
   if (props.preload) {
+    updateSizesAttribute(target.value)
+
+    // Calculate the `sizes` attribute for sources inside a `<picture>` element
+    if (target.value.parentElement?.tagName.toLowerCase() === 'picture') {
+      [...target.value.parentElement.getElementsByTagName('source')].forEach(
+        sourceTag => updateSizesAttribute(sourceTag),
+      )
+    }
+
     loadImage(target.value)
     return
   }