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>
31 lines
831 B
Text
31 lines
831 B
Text
---
|
|
// @ts-ignore
|
|
import loader from 'virtual:image-loader';
|
|
import { getImage } from '../src/index.js';
|
|
import type { ImageAttributes, ImageMetadata, TransformOptions, OutputFormat } from '../src/types.js';
|
|
|
|
export interface LocalImageProps extends Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
|
|
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
|
|
}
|
|
|
|
export interface RemoteImageProps extends TransformOptions, ImageAttributes {
|
|
src: string;
|
|
format: OutputFormat;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export type Props = LocalImageProps | RemoteImageProps;
|
|
|
|
const { loading = "lazy", decoding = "async", ...props } = Astro.props as Props;
|
|
|
|
const attrs = await getImage(loader, props);
|
|
---
|
|
|
|
<img {...attrs} {loading} {decoding} />
|
|
|
|
<style>
|
|
img {
|
|
content-visibility: auto;
|
|
}
|
|
</style>
|