I'm trying to use the component that astro provides via the astro::assets import. Whenever i try to pass i class to the component it gets rendered on the img tag in the DOM. Is there any way i can pass a class to the generated picture element in the DOM?
This is the component file i'm using:
---
import { Picture } from "astro:assets";
interface Props {
src: ImageMetadata;
alt: string;
sizes: string;
class?: string;
}
const { src, alt, sizes, class: className, ...props } = Astro.props
---
<Picture
class:list={["c-image", className]}
src={src}
alt={alt}
loading="lazy"
formats={["webp", "avif"]}
widths={[640, 768, 1024, 1366, 1600, 1920, src.width]}
sizes={sizes}
{...props}
/>
<style scoped lang="scss">
.c-image {
width: 100%;
display: block;
&--cover {
object-fit: cover;
object-position: center;
}
}
</style>
