Files
blog/src/components/core/Picture.astro
2022-08-25 00:46:15 -04:00

44 lines
673 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;
let picture = null;
try {
picture = src && await getPicture({
src,
widths,
formats,
aspectRatio,
})
}
catch (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>