89d76753a0
* moving all normalization logic out of the Image component
* refactor: only require loaders to provide the image src
* Adding a `<Picture />` component
* fixing types.ts imports
* refactor: moving getImage to it's own file
* updating component types to use astroHTML.JSX
* Revert "updating component types to use astroHTML.JSX"
This reverts commit 6e5f578da8.
* going back to letting loaders add extra HTML attributes
* Always use lazy loading and async decoding
* Cleaning up the Picture component
* Adding test coverage for <Picture>
* updating the README
* using JSX types for the Image and Picture elements
* chore: adding changeset
* Update packages/integrations/image/src/get-image.ts
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
* allow users to override loading and async on the <img>
* renaming config to constants, exporting getPicture()
* found the right syntax to import astro-jsx
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
39 lines
1.3 KiB
Text
39 lines
1.3 KiB
Text
---
|
|
// @ts-ignore
|
|
import loader from 'virtual:image-loader';
|
|
import { getPicture } from '../src/get-picture.js';
|
|
import type { ImageAttributes, ImageMetadata, OutputFormat, PictureAttributes, TransformOptions } from '../src/types.js';
|
|
|
|
export interface LocalImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
|
|
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
|
|
sizes: HTMLImageElement['sizes'];
|
|
widths: number[];
|
|
formats?: OutputFormat[];
|
|
}
|
|
|
|
export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, TransformOptions, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
|
|
src: string;
|
|
sizes: HTMLImageElement['sizes'];
|
|
widths: number[];
|
|
aspectRatio: TransformOptions['aspectRatio'];
|
|
formats?: OutputFormat[];
|
|
}
|
|
|
|
export type Props = LocalImageProps | RemoteImageProps;
|
|
|
|
const { src, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = 'lazy', decoding = 'eager', ...attrs } = Astro.props as Props;
|
|
|
|
const { image, sources } = await getPicture({ loader, src, widths, formats, aspectRatio });
|
|
---
|
|
|
|
<picture {...attrs}>
|
|
{sources.map(attrs => (
|
|
<source {...attrs} {sizes}>))}
|
|
<img {...image} {loading} {decoding} />
|
|
</picture>
|
|
|
|
<style>
|
|
img {
|
|
content-visibility: auto;
|
|
}
|
|
</style>
|