133 lines
4.2 KiB
Plaintext
133 lines
4.2 KiB
Plaintext
---
|
|
import { getImage, imageConfig, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
|
|
import * as mime from 'mrmime';
|
|
import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind.js';
|
|
import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
|
|
import type {
|
|
GetImageResult,
|
|
ImageOutputFormat,
|
|
UnresolvedImageTransform,
|
|
} from '../dist/types/public/index.js';
|
|
import type { HTMLAttributes } from '../types';
|
|
|
|
export type Props = (LocalImageProps | RemoteImageProps) & {
|
|
formats?: ImageOutputFormat[];
|
|
fallbackFormat?: ImageOutputFormat;
|
|
pictureAttributes?: HTMLAttributes<'picture'>;
|
|
};
|
|
|
|
const defaultFormats = ['webp'] as const;
|
|
const defaultFallbackFormat = 'png' as const;
|
|
|
|
// Certain formats don't want PNG fallbacks:
|
|
// - GIF will typically want to stay as a gif, either for animation or for the lower amount of colors
|
|
// - SVGs can't be converted to raster formats in most cases
|
|
// - JPEGs compress photographs and high-noise images better than PNG in most cases
|
|
// For those, we'll use the original format as the fallback instead.
|
|
const specialFormatsFallback = ['gif', 'svg', 'jpg', 'jpeg'] as const;
|
|
|
|
const { formats = defaultFormats, pictureAttributes = {}, fallbackFormat, ...props } = Astro.props;
|
|
|
|
if (props.alt === undefined || props.alt === null) {
|
|
throw new AstroError(AstroErrorData.ImageMissingAlt);
|
|
}
|
|
|
|
// Picture attribute inherit scoped styles from class and attributes
|
|
const scopedStyleClass = props.class?.match(/\bastro-\w{8}\b/)?.[0];
|
|
if (scopedStyleClass) {
|
|
if (pictureAttributes.class) {
|
|
pictureAttributes.class = `${pictureAttributes.class} ${scopedStyleClass}`;
|
|
} else {
|
|
pictureAttributes.class = scopedStyleClass;
|
|
}
|
|
}
|
|
|
|
const layout = props.layout ?? imageConfig.layout ?? 'none';
|
|
const useResponsive = layout !== 'none';
|
|
|
|
if (useResponsive) {
|
|
// Apply defaults from imageConfig if not provided
|
|
props.layout ??= imageConfig.layout;
|
|
props.fit ??= imageConfig.objectFit ?? 'cover';
|
|
props.position ??= imageConfig.objectPosition ?? 'center';
|
|
}
|
|
|
|
for (const key in props) {
|
|
if (key.startsWith('data-astro-cid')) {
|
|
// @ts-expect-error This is for island props so they're not properly typed
|
|
pictureAttributes[key] = props[key];
|
|
}
|
|
}
|
|
|
|
const originalSrc = await resolveSrc(props.src);
|
|
const optimizedImages: GetImageResult[] = await Promise.all(
|
|
formats.map(
|
|
async (format) =>
|
|
await getImage({
|
|
...props,
|
|
src: originalSrc,
|
|
format: format,
|
|
widths: props.widths,
|
|
densities: props.densities,
|
|
} as UnresolvedImageTransform),
|
|
),
|
|
);
|
|
|
|
let resultFallbackFormat = fallbackFormat ?? defaultFallbackFormat;
|
|
if (
|
|
!fallbackFormat &&
|
|
isESMImportedImage(originalSrc) &&
|
|
(specialFormatsFallback as ReadonlyArray<string>).includes(originalSrc.format)
|
|
) {
|
|
resultFallbackFormat = originalSrc.format;
|
|
}
|
|
|
|
const fallbackImage = await getImage({
|
|
...props,
|
|
format: resultFallbackFormat,
|
|
widths: props.widths,
|
|
densities: props.densities,
|
|
} as UnresolvedImageTransform);
|
|
|
|
const imgAdditionalAttributes: HTMLAttributes<'img'> = {};
|
|
const sourceAdditionalAttributes: HTMLAttributes<'source'> = {};
|
|
|
|
// Propagate the `sizes` attribute to the `source` elements
|
|
if (props.sizes) {
|
|
sourceAdditionalAttributes.sizes = props.sizes;
|
|
}
|
|
|
|
if (fallbackImage.srcSet.values.length > 0) {
|
|
imgAdditionalAttributes.srcset = fallbackImage.srcSet.attribute;
|
|
}
|
|
|
|
if (import.meta.env.DEV) {
|
|
imgAdditionalAttributes['data-image-component'] = 'true';
|
|
}
|
|
|
|
const { class: className, ...attributes } = {
|
|
...imgAdditionalAttributes,
|
|
...fallbackImage.attributes,
|
|
};
|
|
---
|
|
|
|
<picture {...pictureAttributes}>
|
|
{
|
|
Object.entries(optimizedImages).map(([_, image]) => {
|
|
const srcsetAttribute =
|
|
props.densities || (!props.densities && !props.widths && !useResponsive)
|
|
? `${image.src}${image.srcSet.values.length > 0 ? ', ' + image.srcSet.attribute : ''}`
|
|
: image.srcSet.attribute;
|
|
return (
|
|
<source
|
|
srcset={srcsetAttribute}
|
|
type={mime.lookup(image.options.format ?? image.src) ?? `image/${image.options.format}`}
|
|
{...sourceAdditionalAttributes}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
{/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */}
|
|
<img src={fallbackImage.src} {...attributes} class={className} />
|
|
</picture>
|