ff-webpage/components/dynamicZone/FullImage.vue

<template>
  <NuxtPicture
    loading="lazy"
    class="w-1/2 min-w-[50%] h-fit object-cover object-center mx-auto"
    :src="baseUrl + data?.image.url"
    :imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
  />
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";

const baseUrl = useStrapiUrl().replace("/api", "");

defineProps({
  data: Object as PropType<DynamicZoneFullImage>,
});
</script>