Image

Default

https://

Usage

---
import { Image } from '@yatoday/astro-ui/astro';
import myImage from '~/assets/images/800x800.svg';
---

<!-- Default -->
<Image src="~/assets/images/800x800.svg" alt="Local Image" />

<!-- Imported image -->
<Image src={myImage} alt="Local Image" />

<!-- With props -->
<Image
  src={src}
  class="w-full md:h-full bg-gray-400 dark:bg-slate-700"
  widths={[400, 900]}
  width={400}
  sizes="(max-width: 900px) 400px, 900px"
  alt={title}
  aspectRatio="16:9"
  layout="cover"
  loading="lazy"
  decoding="async"
/>

Props

Prop	Type	Default	Description
`src`	`string`	-	Specifies the path to the image
`width`	`number`	`default`	Specifies the width of an image (px)
`height`	`string`	-	Specifies the height of an image
`alt`	`string`	-	Specifies an alternate text for an image
`loading`	`eager` \| `lazy`	`eager`	Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
`decoding`	`sync` \| `async` \| `auto`	`sync`	Whether it should wait for the image to be decoded before presenting other content updates or not. Read more
`sizes`	`string`	-	Specifies image sizes for different page layouts
`widths`	`string`	-	-
`aspectRatio`	`string`	-	-
`objectPosition`	`string`	-	-
`format`	`string`	-	-
`layout`	`constrained` \| `fixed` \| `fullWidth`	`constrained`	Image size relative to container

layout

Helper attribute for setting image size

constrained - If screen is wider than the max size, image width is the max size, otherwise it’s the width of the screen
Will be rendered with: (min-width: ${width}px) ${width}px, 100vw
fixed - Image is always the same width, whatever the size of the screen. Will be rendered with: ${width}px
fullWidth - Image is always the width of the screen. Will be rendered with: 100vw