Image

사용법


API

v-img
이름
alt
디폴트
undefined
타입
string
이름
aspect-ratio
디폴트
undefined
타입
string | number
이름
contain
디폴트
false
타입
boolean
이름
gradient
디폴트
undefined
타입
string
이름
height
디폴트
undefined
타입
number | string

컴포넌트의 높이를 설정

이름
lazy-src
디폴트
undefined
타입
string
이름
max-height
디폴트
undefined
타입
number | string

컨탠츠의 최대 높이를 설정

이름
max-width
디폴트
undefined
타입
number | string
이름
position
디폴트
'center center'
타입
string
이름
sizes
디폴트
undefined
타입
string
이름
src
디폴트
undefined
타입
string | object
이름
srcset
디폴트
undefined
타입
string
이름
transition
디폴트
fade-transition
타입
boolean | string
이름
width
디폴트
undefined
타입
number | string

The width of the content

예제

Contain and Cover

If the provided aspect ratio doesn't match that of the actual image, the default behavior is to fill as much space as possible, clipping the sides of the image. Enabling the contain prop will prevent this, but will result in empty space at the sides.


Height

v-img will automatically grow to the size of its src, preserving the correct aspect ratio. You can limit this with the height and max-height props.


Fixed ratio


Gradients

The gradient prop can be used to apply a simple gradient overlay to the image. More complex gradients should be written as a class on the content slot instead.