audi/app/components/block/fullSizeBannerText1.vue

<template>
  <section
    class="img--section--full"
    :class="mask"
    :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" :style="'color:' + textColor">{{ 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",
    },
    mask: {
      type: String,
      default: "",
      validator: (value) => ["", "hidden"].includes(value),
    },
    textLocation: {
      type: String,
      default: "bottom",
      validator: (value) => ["bottom", "top", "left", "right"].includes(value),
    },
    textColor: {
      type: String,
      default: "#fff",
      validator: (value) => ["#fff", "#020203"].includes(value),
    },
    altText: {
      type: String,
      default: "Banner Image",
    },
    type: {
      type: String,
      default: "contain", // 'horz' , 'vert'
      validator: (value) => ["contain", "cover"].includes(value),
    },
  });
</script>