Image Components

Images are very important in today's websites. They help carry your message to your users, without writing anything. Explore Vulk images.

Components Open Docs
DarkRatioRoundedSquare

Dark Image

Dark image feature


<template>
  <DarkImage
    src="/@src/assets/illustrations/features/vr.svg"
    src-dark="/@src/assets/illustrations/features/vr-dark.svg"
    alt=""
    width="800"
    height="600"
  />
</template>

Image Ratio

Image ratio feature

4by3 ratio

ratio image

3by4 ratio

ratio image

5by4 ratio

ratio image

16by9 ratio

ratio image

<template>
  <ImageRatio ratio="4by3">
    <img src="https://dummyimage.com/640x480/" alt="ratio image" width="640" height="480" />
  </ImageRatio>
</template>

Rounded Ratio

Rounded ratio feature

4by3 ratio

ratio image

3by4 ratio

ratio image

5by4 ratio

ratio image

16by9 ratio

ratio image

<template>
  <ImageRatio ratio="4by3" rounded>
    <img src="https://dummyimage.com/640x480/" alt="ratio image" width="640" height="480" />
  </ImageRatio>
</template>

Square Ratio

Square ratio feature

ratio image
ratio image
ratio image
ratio image
ratio image
ratio image
ratio image
ratio image
ratio image
ratio image
ratio image
ratio image

<template>
  <ImageRatio ratio="1by1" :square-dimensions="96" rounded>
    <img src="https://dummyimage.com/250x250" alt="ratio image" width="250" height="250" />
  </ImageRatio>
</template>