ImageSharedProps Type — astro Architecture

Source Code

packages/astro/src/assets/types.ts lines 107–236

type ImageSharedProps<T> = T & {
	/**
	 * Width of the image, the value of this property will be used to assign the `width` property on the final `img` element.
	 *
	 * This value will additionally be used to resize the image to the desired width, taking into account the original aspect ratio of the image.
	 *
	 * **Example**:
	 * ```astro
	 * <Image src={...} width={300} alt="..." />
	 * ```
	 * **Result**:
	 * ```html
	 * <img src="..." width="300" height="..." alt="..." />
	 * ```
	 */
	width?: number | `${number}`;
	/**
	 * Height of the image, the value of this property will be used to assign the `height` property on the final `img` element.
	 *
	 * For local images, if `width` is not present, this value will additionally be used to resize the image to the desired height, taking into account the original aspect ratio of the image.
	 *
	 * **Example**:
	 * ```astro
	 * <Image src={...} height={300} alt="..." />
	 * ```
	 * **Result**:
	 * ```html
	 * <img src="..." height="300" width="..." alt="..." />
	 * ```
	 */
	height?: number | `${number}`;
	/**
	 * Desired output format for the image. Defaults to `webp`.
	 *
	 * **Example**:
	 * ```astro
	 * <Image src={...} format="avif" alt="..." />
	 * ```
	 */
	format?: ImageOutputFormat;
	/**
	 * Desired quality for the image. Value can either be a preset such as `low` or `high`, or a numeric value from 0 to 100.
	 *
	 * The perceptual quality of the output image is service-specific.
	 * For instance, a certain service might decide that `high` results in a very beautiful image, but another could choose for it to be at best passable.
	 *
	 * **Example**:
	 * ```astro
	 * <Image src={...} quality='high' alt="..." />
	 * <Image src={...} quality={300} alt="..." />
	 * ```
	 */
	quality?: ImageQuality;

	/**
	 * If true, the image will be loaded with a higher priority. This can be useful for images that are visible above the fold. There should usually be only one image with `priority` set to `true` per page.
	 * All other images will be lazy-loaded according to when they are in the viewport.
	 * **Example**:
	 * ```astro
	 * <Image src={...} priority alt="..." />
	 * ```
	 */
	priority?: boolean;
} & (
		| {
				/**
				 * The layout type for responsive images.
				 *
				 * Allowed values are `constrained`, `fixed`, `full-width` or `none`. Defaults to value of `image.layout`.
				 *
				 * - `constrained` - The image will scale to fit the container, maintaining its aspect ratio, but will not exceed the specified dimensions.
				 * - `fixed` - The image will maintain its original dimensions.
				 * - `full-width` - The image will scale to fit the container, maintaining its aspect ratio, even if that means the image will exceed its original dimensions.
				 *
				 * **Example**:
				 * ```astro
				 * <Image src={...} layout="constrained" alt="..." />
				 * ```
				 */

				layout?: ImageLayout;