Image
Default constrains for media elements such as img, video, iframe, object or svg
Installation
Follow instructions for individual framework usage below
Styles
Variants
Tokens
Scripts
The Image script removes the skeleton placeholder once the wrapped media is ready.
Examples
Default
html
<x-image class="x-image before:skeleton">
<img class="aspect-[3/2]" src="https://placehold.co/250x250/webp" loading="lazy" alt="">
</x-image>liquid
<div data-controller="x-image" class="x-image before:skeleton">
<img class="aspect-[3/2]" src="https://placehold.co/250x250/webp" loading="lazy" alt="">
</div>vue
<script setup lang="ts">
import { Image } from '@/components/image'
</script>
<template>
<Image class="before:skeleton">
<img class="aspect-[3/2]" src="https://placehold.co/600x400/webp" loading="lazy" alt="">
</Image>
</template>tsx
import { Image } from '@/components/image'
export function Example() {
return (
<Image className="before:skeleton">
<img className="aspect-[3/2]" src="https://placehold.co/600x400/webp" loading="lazy" alt="" />
</Image>
)
}Picture
html
<picture class="x-image before:skeleton" is="x-image">
<source srcset="https://placehold.co/250x250/333333/webp" media="(min-width: 40rem)">
<img class="aspect-[3/2]" src="https://placehold.co/150x150/777777/webp" loading="lazy" alt="">
</picture>liquid
<picture class="x-image before:skeleton" data-controller="x-image">
<source srcset="https://placehold.co/250x250/333333/webp" media="(min-width: 40rem)">
<img class="aspect-[3/2]" src="https://placehold.co/150x150/777777/webp" loading="lazy" alt="">
</picture>vue
<script setup lang="ts">
import { Image } from '@/components/image'
</script>
<template>
<Image class="before:skeleton" as="picture">
<source srcset="https://placehold.co/250x250/333333/webp" media="(min-width: 40rem)">
<img class="aspect-[3/2]" src="https://placehold.co/150x150/777777/webp" loading="lazy" alt="">
</Image>
</template>tsx
import { Image } from '@/components/image'
export function Example() {
return (
<Image className="before:skeleton" as="picture">
<source srcSet="https://placehold.co/250x250/333333/webp" media="(min-width: 40rem)" />
<img className="aspect-[3/2]" src="https://placehold.co/150x150/777777/webp" loading="lazy" alt="" />
</Image>
)
}Rounded
html
<div class="x-image rounded">
<img class="aspect-square" src="https://picsum.photos/seed/picsum/200/200" loading="lazy" alt="">
</div>Avatar
html
<div class="x-image avatar size-32">
<span>LB</span>
</div>Skeleton
html
<x-image class="x-image before:skeleton">
<img class="aspect-[3/2]" src="https://picsum.photos/seed/picsum/300/200" loading="lazy" alt="">
</x-image>liquid
<div class="x-image before:skeleton" data-controller="x-image">
<img class="aspect-[3/2]" src="https://picsum.photos/seed/picsum/300/200" loading="lazy" alt="">
</div>vue
<script setup lang="ts">
import { Image } from '@/components/image'
</script>
<template>
<Image class="before:skeleton">
<img class="aspect-[3/2]" src="https://picsum.photos/seed/picsum/300/200" loading="lazy" alt="">
</Image>
</template>tsx
import { Image } from '@/components/image'
export function Example() {
return (
<Image className="before:skeleton">
<img className="aspect-[3/2]" src="https://picsum.photos/seed/picsum/300/200" loading="lazy" alt="" />
</Image>
)
}Iframe
html
<div class="x-image">
<iframe class="aspect-square" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10243.539317839937!2d14.3677486!3d50.0697185!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66f5877a189baf0d!2sTvorba+webov%C3%BDch+str%C3%A1nek+-+New+Logic+Studio!5e0!3m2!1sen!2scz!4v1547215701439" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>