An image component with multiple features:
border-radius
.<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"/>
<> <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)} /></>
<> <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)} /></>
<> <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></>
<> <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} /></>
<> <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" /></>
<> <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" /></>
<> <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 is a design system and component library for building websites, web and desktop applications.