audi/app/components/block/fullSizeBannerText1.vue

<template>
  <section
    class="img--section--full"
    :data-type="type"
    :data-text-location="textLocation"
  >
    <div :style="{ height: height + 'px' }">
      <picture>
        <source media="(max-width: 768px)" :srcset="`${imagePath}?width=768`" />
        <source media="(max-width: 1024px)" :srcset="`${imagePath}?width=1024`" />
        <source media="(max-width: 1440px)" :srcset="`${imagePath}?width=1440`" />
        <source media="(min-width: 1440px)" :srcset="`${imagePath}?width=1920`" />
        <img data-object-fit="true" :src="imagePath" :alt="altText" loading="lazy" />
      </picture>
      <div class="alt--text">{{ altText }}</div>
    </div>
  </section>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    height: {
      type: String,
      default: "100vh",
    },
    imagePath: {
      type: String,
      default: "/img/exclusive/1920X1080_exclusive_edited_v2.jpg",
    },
    textLocation: {
      type: String,
      default: "bottom",
      validator: (value) => ["bottom", "top", "left", "right"].includes(value),
    },
    altText: {
      type: String,
      default: "Banner Image",
    },
    type: {
      type: String,
      default: "contain", // 'horz' , 'vert'
      validator: (value) => ["contain", "cover"].includes(value),
    },
  });
</script>