fix(image): roadiz rendering

rezozero · May 24, 2024 · 9226c98 · 9226c98
1 parent a08ced3
commit 9226c98
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/components/molecules/VImg/VImg.vue b/components/molecules/VImg/VImg.vue
@@ -65,7 +65,7 @@ export default defineComponent({
             provider: props.provider,
             preset: props.preset,
             densities: props.densities,
-            ...modifiers.value,
+            modifiers: modifiers.value,
         }))
         const src = computed(() =>
             $img(

diff --git a/components/molecules/VRoadizImage/VRoadizImage.vue b/components/molecules/VRoadizImage/VRoadizImage.vue
@@ -14,6 +14,8 @@ export const vRoadizImageProps = {
         type: String,
         default: 'webp',
     },
+    sizes: String,
+    densities: String,
 }
 
 export default defineComponent({
@@ -33,6 +35,7 @@ export default defineComponent({
         const cropDimensions = computed(() => modifiers.value?.crop?.split('x') || [])
         const width = computed(() => cropDimensions.value[0] || props?.width || document.value?.imageWidth)
         const height = computed(() => cropDimensions.value[1] || props?.height || document.value?.imageHeight)
+        const isPicture = computed(() => !!slots.default || props.tag === 'picture')
         const documentProps = computed(() => {
             return {
                 src: document.value?.thumbnail?.relativePath || document.value?.relativePath,
@@ -42,39 +45,38 @@ export default defineComponent({
                 placeholder: document.value?.imageAverageColor,
                 copyright: document.value?.copyright,
                 format: props.format,
+                sizes:
+                    props.sizes ||
+                    (!isPicture.value && !props.densities && useImage().options.presets?.default?.sizes) ||
+                    undefined,
                 provider: 'interventionRequest',
             }
         })
-
-        const isPicture = computed(() => !!slots.default || props.tag === 'picture')
-
-        const imageComponent = computed(() =>
-            h(
-                isPicture.value ? VPicture : VImg,
-                {
-                    ...documentProps.value,
-                    modifiers: modifiers.value,
-                },
-                isPicture.value ? slots.default?.() : undefined,
-            ),
-        )
-
         const copyright = computed(
             () =>
                 (typeof props.copyright === 'string' && props.copyright) ||
                 (props.copyright === true && document.value?.copyright),
         )
 
+        const imageComponent = h(
+            isPicture.value ? VPicture : VImg,
+            {
+                ...documentProps.value,
+                modifiers: modifiers.value,
+            },
+            () => [isPicture.value ? slots.default?.() : undefined],
+        )
+
         return () => {
             if (copyright.value) {
                 // The copyright needs a wrapper element.
                 return h('figure', { class: [$style.root, $style['root--copyright']] }, [
-                    imageComponent.value,
+                    imageComponent,
                     h(LazyVCopyright, { content: copyright.value }),
                 ])
             }
 
-            return imageComponent.value
+            return imageComponent
         }
     },
 })