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

Dark Ratio Rounded Square

Dark Image

Dark image feature


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

Image Ratio

Image ratio feature

4by3 ratio

3by4 ratio

5by4 ratio

16by9 ratio


<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

3by4 ratio

5by4 ratio

16by9 ratio


<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


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