Create Picture componente to overwrite img tag classes

This commit is contained in:
prototypa
2022-08-13 02:28:26 -04:00
parent 978cf81458
commit 08f7f4e7ac

View File

@ -0,0 +1,29 @@
---
import { getPicture } from "@astrojs/image";
const {
src,
alt,
sizes,
widths,
aspectRatio,
formats = ['avif', 'webp'],
loading = 'lazy',
decoding = 'async',
class :className = "",
...attrs
} = Astro.props;
const { image, sources } = await getPicture({ src, widths, formats, aspectRatio });
---
<picture {...attrs}>
{sources.map((attrs) => <source {...attrs} {sizes} />)}
<img {...image} {loading} {decoding} {alt} class={className} />
</picture>
<style>
img {
content-visibility: auto;
}
</style>