0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
astro/packages/integrations/image/components/Picture.astro
Oussama Bennaci 1e5d8ba9af
[@astrojs/image] support additional resize options (#4438)
* working draft

* more sharp params

* add changeset

* fix typing

* wip

* add missing docblocks

* update lock file

* remove enlargement and reduction resize options

* add tests

* Add docs

* support crop options in pictures

* cleanup

* define crop types in docs

* cleanup

* remove kernel option

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
2022-09-09 20:13:59 +00:00

74 lines
1.9 KiB
Text

---
import { getPicture } from '../dist/index.js';
import { warnForMissingAlt } from './index.js';
import type { ImgHTMLAttributes, HTMLAttributes } from './index.js';
import type { ImageMetadata, OutputFormat, TransformOptions } from '../dist/index.js';
interface LocalImageProps
extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
Omit<TransformOptions, 'src'>,
Pick<astroHTML.JSX.ImgHTMLAttributes, 'loading' | 'decoding'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
alt: string;
sizes: HTMLImageElement['sizes'];
widths: number[];
formats?: OutputFormat[];
}
interface RemoteImageProps
extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
TransformOptions,
Pick<ImgHTMLAttributes, 'loading' | 'decoding'> {
src: string;
/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
alt: string;
sizes: HTMLImageElement['sizes'];
widths: number[];
aspectRatio: TransformOptions['aspectRatio'];
formats?: OutputFormat[];
background: TransformOptions['background'];
}
export type Props = LocalImageProps | RemoteImageProps;
const {
src,
alt,
sizes,
widths,
aspectRatio,
fit,
background,
position,
formats = ['avif', 'webp'],
loading = 'lazy',
decoding = 'async',
...attrs
} = Astro.props as Props;
if (alt === undefined || alt === null) {
warnForMissingAlt();
}
const { image, sources } = await getPicture({
src,
widths,
formats,
aspectRatio,
fit,
background,
position,
});
---
<picture {...attrs}>
{sources.map((attrs) => <source {...attrs} {sizes} />)}
<img {...image} {loading} {decoding} {alt} />
</picture>
<style>
img {
content-visibility: auto;
}
</style>