Image Components

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

Dark Image

Dark image feature

dark image

<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

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>