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/