72c760e9b8
* feat(image): throw if no `alt` is provided * chore: add changeset * docs(image): update README * updated alt text stuff throughout * fixing with-mdx test suite * warn for missing alt text, will throw an error in a future release * final README tweaks Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
42 lines
1.3 KiB
Text
42 lines
1.3 KiB
Text
---
|
|
// @ts-ignore
|
|
import { getImage } from '../dist/index.js';
|
|
import { warnForMissingAlt } from './index.js';
|
|
import type { ImgHTMLAttributes } from './index.js';
|
|
import type { ImageMetadata, TransformOptions, OutputFormat } from '../dist/index.js';
|
|
|
|
interface LocalImageProps
|
|
extends Omit<TransformOptions, 'src'>,
|
|
Omit<ImgHTMLAttributes, 'src' | 'width' | 'height'> {
|
|
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;
|
|
}
|
|
|
|
interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttributes {
|
|
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;
|
|
format: OutputFormat;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export type Props = LocalImageProps | RemoteImageProps;
|
|
|
|
const { loading = 'lazy', decoding = 'async', ...props } = Astro.props as Props;
|
|
|
|
if (props.alt === undefined || props.alt === null) {
|
|
warnForMissingAlt();
|
|
}
|
|
|
|
const attrs = await getImage(props);
|
|
---
|
|
|
|
<img {...attrs} {loading} {decoding} />
|
|
|
|
<style>
|
|
img {
|
|
content-visibility: auto;
|
|
}
|
|
</style>
|