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