51 lines
820 B
Plaintext
51 lines
820 B
Plaintext
---
|
|
import { getPicture } from "@astrojs/image";
|
|
|
|
const {
|
|
src,
|
|
alt,
|
|
sizes,
|
|
widths,
|
|
aspectRatio = 1,
|
|
formats = ["avif", "webp"],
|
|
loading = "lazy",
|
|
decoding = "async",
|
|
class: className = "",
|
|
...attrs
|
|
} = Astro.props;
|
|
|
|
// const { image, sources = [] } =
|
|
// !src ? { image: {}}
|
|
// : (typeof src === "string"
|
|
// ? { image: { src } }
|
|
// :
|
|
|
|
let picture = null;
|
|
try {
|
|
picture = await getPicture({
|
|
src,
|
|
widths,
|
|
formats,
|
|
aspectRatio,
|
|
})
|
|
}
|
|
catch (e) {
|
|
console.log(e);
|
|
}
|
|
|
|
const { image = {}, sources = [] } = picture || {}
|
|
---
|
|
|
|
{ (src && image?.src) &&
|
|
<picture {...attrs}>
|
|
{sources.map((attrs) =>
|
|
<source {...attrs} {sizes} />)}
|
|
<img {...image} {loading} {decoding} {alt} class={className} />
|
|
</picture>
|
|
}
|
|
|
|
<style>
|
|
img {
|
|
content-visibility: auto;
|
|
}
|
|
</style> |