Image

Render optimized images

Use the Image component to render images with consistent visuals. It supports lazy loading, fluid dimensions, aspect ratios, center alignment and rounded corners. You can use the ImageLoader wrapper to also handle loading animation and broken images.

Preview

---
import { Image } from 'webcoreui/astro'
---

<Image
    src="/img/astro.png"
    alt="Alternate text"
    width={200}
    height={200}
    lazy={true}
/>

<script>
    import { Image } from 'webcoreui/svelte'
</script>

<Image
    src="/img/astro.png"
    alt="Alternate text"
    width={200}
    height={200}
    lazy={true}
/>

import React from 'react'
import { Image } from 'webcoreui/react'

const Component = () => (
    <Image
        src="/img/astro.png"
        alt="Alternate text"
        width={200}
        height={200}
        lazy={true}
    />
)

export default Component

To use the Image component, you need to provide the following props:

• src: Sets the path to the image.
• alt: Sets an alternate text for the image.
• width and height: Sets the width and height of the image.

Optionally, you can set the lazy property to true to lazy-load the image. If omitted, the image will be loaded eagerly.

Center Image

To center align an image, simply set the center prop to true:

<Image
    src="/img/astro.png"
    alt="Alternate text"
    width={200}
    height={200}
    lazy={true}
    center={true}
/>

Fill Available Space

To make an image fill its container, set the full prop to width, height or both:

<Image
    src="/img/astro.png"
    alt="Alternate text"
    width={200}
    height={200}
    lazy={true}
    full="width"
/>

Aspect Ratio

You can also specify the aspect ratio of the image using the ratio prop that supports both width/height and width:height formats.

Images with 4:3, 16:9 and 21:9 aspect ratios

<Image
    src="/img/astro.png"
    alt="Alternate text"
    width={200}
    height={200}
    lazy={true}
    ratio="16:9"
/>

Rounded Corners

By default, images are rendered with rounded corners. You can set the rounded prop to one of the following values:

Top

Bottom

Left

Right

Diagonal

Reverse diagonal

Or disable rounded corners completely by setting the rounded prop to none.

<Image {...imageProps} rounded="top" />
<Image {...imageProps} rounded="bottom" />
<Image {...imageProps} rounded="left" />
<Image {...imageProps} rounded="right" />
<Image {...imageProps} rounded="diagonal" />
<Image {...imageProps} rounded="reverse-diagonal" />

Handle Loading and Broken Images

To handle loading animation and broken images, you can use the ImageLoader component, which is a wrapper around the Image component.

---
import { ImageLoader } from 'webcoreui/astro'
---

<ImageLoader
    src="/img/astro.png"
    fallback="/img/placeholder.png"
    alt="Alternate text"
    width={200}
    height={200}
    lazy={true}
/>

Simply replace Image with ImageLoader in your code to add a loading animation. You can also add a fallback image by specifying the fallback prop. In case the image is not found, the fallback placeholder will be displayed. You can also pass SkeletonProps to the component to customize the loading animation.

API

type ImageProps = {
    src: string
    alt: string
    width: number | string
    height: number | string
    lazy?: boolean
    ratio?: string
    center?: boolean
    full?: 'width' | 'height' | 'both'
    rounded?:
        | 'top'
        | 'bottom'
        | 'left'
        | 'right'
        | 'diagonal'
        | 'reverse-diagonal'
        | 'none'
    className?: string
}

Changelog

• v1.4.0 Added in version.