generated from avior/template-web-astro
43 lines
1.1 KiB
Plaintext
43 lines
1.1 KiB
Plaintext
---
|
|
import { LocalImageProps, RemoteImageProps, getImage } from 'astro:assets'
|
|
import AstroUtils from '../libs/AstroUtils'
|
|
type ImageProps = LocalImageProps | RemoteImageProps
|
|
export type Props = ImageProps
|
|
|
|
const res = await AstroUtils.wrap(async () => {
|
|
const image = Astro.props.src
|
|
const ext = typeof image === 'string' ? image.substring(image.lastIndexOf('.')) : image.format
|
|
if (ext === 'svg') {
|
|
return {
|
|
format: 'raw',
|
|
props: {
|
|
...Astro.props,
|
|
src: typeof image === 'string' ? image : image.src
|
|
}
|
|
}
|
|
}
|
|
|
|
const avif = await getImage({src: Astro.props.src, format: 'avif'})
|
|
const webp = await getImage({src: Astro.props.src, format: 'webp'})
|
|
const orig = await getImage({src: Astro.props.src, format: ext})
|
|
|
|
return {
|
|
format: 'new',
|
|
avif,
|
|
webp,
|
|
orig
|
|
}
|
|
})
|
|
|
|
---
|
|
|
|
{res.format === 'new' && (
|
|
<picture class:list={[res.orig!.attributes.class, Astro.props.class]}>
|
|
<source srcset={res.avif!.src} type="image/avif" />
|
|
<source srcset={res.webp!.src} type="image/webp" />
|
|
<img src={res.orig!.src} class="" {...res.orig!.attributes} />
|
|
</picture>
|
|
) || (
|
|
<img {...res.props} />
|
|
)}
|