Ui.Image

An image component with multiple features:

  • Lazy loads when it's near the visible portion of the viewport.
  • Has an overridable border-radius.
  • Fades in when the image is loaded.
  • Not draggable by default.
  • Set to cover the container with center position.
Interactive Demo

You can play around with a Ui.Image below using the controls.

Src
beach.jpg
Alt
Object Fit
cover
Object Position
center
Width (320px)
Height (240px)
Border Radius
Draggable
Full Width
Transparent
<Ui.Image
alt="white concrete buildings under blue sky"
height={Ui.Size.Px(240)}
width={Ui.Size.Px(320)}
objectPosition="center"
objectFit="cover"
transparent={false}
draggable={false}
fullWidth={false}
src="beach.jpg"/>
Source

The source of the image can be controlled using the src property.

<>
<Ui.Image
src={@asset(../../assets/images/beach.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(240)}
/>
<Ui.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(240)}
/>
<Ui.Image
src={@asset(../../assets/images/city.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(240)}
/>
</>
Width and Height

The image dimensions can be controlled using the width and height properties.

<>
<Ui.Image
src={@asset(../../assets/images/road.jpg)}
height={Ui.Size.Px(100)}
width={Ui.Size.Px(100)}
/>
<Ui.Image
src={@asset(../../assets/images/road.jpg)}
height={Ui.Size.Px(200)}
width={Ui.Size.Px(200)}
/>
<Ui.Image
src={@asset(../../assets/images/road.jpg)}
height={Ui.Size.Px(300)}
width={Ui.Size.Px(300)}
/>
</>
Full Width

The image can fill it parent containers width by setting the fullWidth property.

<>
<div style="width: 120px">
<Ui.Image
src={@asset(../../assets/images/city.jpg)}
height={Ui.Size.Px(240)}
fullWidth={true}
/>
</div>
<div style="width: 220px">
<Ui.Image
src={@asset(../../assets/images/city.jpg)}
height={Ui.Size.Px(240)}
fullWidth={true}
/>
</div>
<div style="width: 320px">
<Ui.Image
src={@asset(../../assets/images/city.jpg)}
height={Ui.Size.Px(240)}
fullWidth={true}
/>
</div>
</>
Draggable

The native dragging of the image can be controlled using the draggable property.

<>
<Ui.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(320)}
draggable={false}
/>
<Ui.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(320)}
draggable={true}
/>
</>
Alt

The alt text of the image can be controlled using the alt property.

<Ui.Image
src={@asset(../../assets/images/city.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(320)}
alt="A city."
/>
Object Fit

The object-fit CSS proprerty can be controlled using the objectFit property.

<>
<Ui.Image
src={@asset(../../assets/images/road.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(300)}
objectFit="cover"
/>
<Ui.Image
src={@asset(../../assets/images/road.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(300)}
objectFit="contain"
/>
</>
Object Position

The object-position CSS proprerty can be controlled using the objectPosition property.

<>
<Ui.Image
src={@asset(../../assets/images/beach.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(300)}
objectPosition="top left"
/>
<Ui.Image
src={@asset(../../assets/images/beach.jpg)}
height={Ui.Size.Px(240)}
width={Ui.Size.Px(300)}
objectPosition="center"
/>
</>
Border Radius

The border-radius CSS proprerty can be controlled using the borderRadius property.

<>
<Ui.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(200)}
width={Ui.Size.Px(200)}
borderRadius="100%"
/>
<Ui.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(200)}
width={Ui.Size.Px(200)}
borderRadius="30px"
/>
<Ui.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(200)}
width={Ui.Size.Px(200)}
borderRadius="20% / 50%"
/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.
app-books.jpg
app-contacts.jpg
app-mail.jpg
app-weather.jpg
app-weight-tracker.jpg
avatar.jpg
beach.jpg
book-cover.jpg
white-beach.jpg
city.jpg
road.jpg