test
Home IT/WEB vuetify v-img 컴포넌트 내에 오버레이 적용방법

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

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

v-img의 Default Slot 사용방법

inline ad

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/

RECENT POSTS

개미를 퇴치하는 자연적인 방법 중 가장 효과적인 방법 6가지

개미를 자연스럽게 퇴치하는 여러 가지 방법 중 가장 효과적인 몇 가지 방법을 소개하겠습니다. 이 방법들은 모두 집에서 쉽게 구할 수 있는 재료를 사용하여 개미를...

부심장을 지키는 올바른 식단: 먹으면 좋은 음식과 나쁜 음식

부정맥 환자는 심장 건강을 유지하고 증상을 관리하기 위해 특정 음식을 피하고, 심장 건강에 좋은 음식을 섭취하는 것이 중요합니다. 다음은 부정맥 환자가 피해야 나쁜 음식과...

부정맥 arrhythmia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 부정맥(Arrhythmia)은 심장의 정상적인 리듬이 불규칙해지거나 비정상적으로 빨라지거나 느려지는 상태를 말합니다. 이는 심장의 전기적 신호 전달에 문제가 생겨 발생하며, 다양한 원인과 증상을 가지고 있습니다. 원인 부정맥의 원인은...

폐렴 pneumonia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 폐렴(Pneumonia)은 폐의 폐포(air sacs)에 염증이 생겨 액체나 고름이 차는 질환입니다. 주로 세균, 바이러스, 곰팡이 등의 감염에 의해 발생하며, 심한 경우 생명을 위협할 수 있습니다. 원인 폐렴의...