ff-webpage/components/dynamicZone/Gallery.vue

<template>
  <div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
    <NuxtPicture
      v-for="img in data?.images"
      loading="lazy"
      class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
      :src="baseUrl + img.url"
      :imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
    />
  </div>
</template>

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

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

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