vuetify v-img 컴포넌트 내에 오버레이 적용방법

By
markettraders
-
0
517

v-img 컴포넌트 위에 텍스트를 올리는 일반적인 방법 중 하나는 Vuetify의 v-img 컴포넌트에서 제공하는 slot을 사용하는 것입니다. v-img 컴포넌트는 이미지 로딩을 처리하는 동안 사용자 정의 컨텐츠를 표시할 수 있는 여러 slot을 제공합니다. 이 중 default slot을 사용하면 이미지 위에 텍스트나 다른 Vue 컴포넌트를 배치할 수 있습니다.

v-img의 Default Slot 사용방법

v-img의 default slot은 이미지 위에 HTML 또는 Vue 컴포넌트를 배치할 때 사용할 수 있습니다. 이를 활용해 이미지 위에 텍스트를 올릴 수 있습니다.

이 예제에서는 v-row와 v-col 컴포넌트를 사용하여 이미지 중앙에 텍스트를 정렬하고 있습니다. fill-height 클래스를 사용하면 v-row가 v-img의 전체 높이를 채우게 되어, 이미지 위 전체 영역에 걸쳐 텍스트나 다른 컨텐츠를 배치할 수 있습니다.

<v-img
  src="your-image-url.jpg"
  aspect-ratio="1.7"
>
  <template v-slot:default>
    <v-row
      class="fill-height"
      align="center"
      justify="center"
    >
      <v-col class="text-center">
        <span class="display-2 text-overlay">여기에 텍스트</span>
      </v-col>
    </v-row>
  </template>
</v-img>

v-img에 오버레이 적용하기

<v-img
  :src="getThumbnailUrl(video)"
  aspect-ratio="1.78"
  cover
  @click="handleImageClick(video, index)"
>
  <template v-slot:default>
    <div class="d-flex align-center justify-center fill-height overlay-style">
       <!-- 오버레이 추가 내용 -->
      <div class="overlay-text">
        여기에 오버레이 텍스트나 추가 정보
      </div>
    </div>
  </template>
</v-img>
.overlay-style {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 오버레이 배경 */
  position: absolute;
  top: 0;
  left: 0;
}

.overlay-text {
  color: white; /* 텍스트 색상 */
  font-size: 18px; /* 텍스트 크기 */
  padding: 10px; /* 텍스트 주변 여백 */
}

관련문서

vuetify v-img api: https://vuetifyjs.com/en/api/v-img/