LazyImage

Image placeholder with a fixed aspect ratio and rounded corners.

Jump to API reference

Import

Vue
import { UiLazyImage } from '@ziyarago/ui/vue'

16:9

Vue
<UiLazyImage src="/3d/kaaba.png" alt="Kaaba" aspect-ratio="16/9" />

Square, small radius

Vue
<UiLazyImage
  src="/3d/hotel.png"
  alt="Hotel"
  aspect-ratio="1/1"
  :rounded="8"
 />

API reference

Image box with a fixed aspect ratio and rounded corners, rendered as a background image.

Props

PropType and valuesDefaultDescription
srcstring—Image URL. An empty placeholder is shown without it.
altstring''Accessible description, exposed as aria-label on role="img".
aspectRatiostring'16/9'CSS aspect-ratio value such as "1/1" or "4/3".
roundednumber20Corner radius in px.