ff-webpage/components/dynamicZone/FullImage.vue

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

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

const runtimeConfig = useRuntimeConfig();
const baseUrl = runtimeConfig.public.strapi.url;

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