如何为Astro <Picture />组件生成的picture元素添加类名？

return (<Picture />)

问题说明 #

使用astro:assets提供的<Picture />组件时，传入的类名会被渲染到DOM中的<img>标签上，需要将类名添加到外层生成的<picture>元素上。

用户使用的组件代码如下：

---
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渲染结果：生成的<picture>元素无自定义类名，c-image及传入的类名均被添加到内部的<img>标签上。

解决方案 #

方法1：使用pictureAttributes属性（Astro v2.10+支持） #

Astro v2.10版本后为<Picture />组件新增了pictureAttributes参数，可直接给生成的<picture>元素传递属性。修改代码如下：

---
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
    src={src} 
    alt={alt}
    loading="lazy"
    formats={["webp", "avif"]}
    widths={[640, 768, 1024, 1366, 1600, 1920, src.width]}
    sizes={sizes}
    pictureAttributes={{
        class: ["c-image", className].filter(Boolean).join(' ')
    }}
    {...props}
/>

<style scoped lang="scss">
    .c-image {
        width: 100%;
        display: block;

        &--cover {
            object-fit: cover;
            object-position: center;
        }
    }
</style>

方法2：手动构建picture标签（兼容旧版本） #

若你的Astro版本较低，不支持pictureAttributes，可手动渲染<picture>标签，内部用<Image />组件生成对应的<source>和<img>元素：

---
import { Image } from "astro:assets";

interface Props {
    src: ImageMetadata;
    alt: string;
    sizes: string;
    class?: string;
}

const { src, alt, sizes, class: className, ...props } = Astro.props
const pictureClass = ["c-image", className].filter(Boolean).join(' ')
---
<picture class={pictureClass}>
    <Image
        src={src}
        alt={alt}
        loading="lazy"
        formats={["webp", "avif"]}
        widths={[640, 768, 1024, 1366, 1600, 1920, src.width]}
        sizes={sizes}
        {...props}
    />
</picture>

<style scoped lang="scss">
    .c-image {
        width: 100%;
        display: block;

        &--cover {
            object-fit: cover;
            object-position: center;
        }
    }
</style>

以上两种方法均可将类名正确添加到<picture>元素上。

内容的提问来源于stack exchange，提问作者Bram Mortier