Create Picture componente to overwrite img tag classes
This commit is contained in:
29
src/components/astro/utils/Picture.astro
Normal file
29
src/components/astro/utils/Picture.astro
Normal 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>
|
Reference in New Issue
Block a user