Passing a class to the generated picture alement Astro <Picture /> component

16 Views Asked by At

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>

DOM result

0

There are 0 best solutions below