Adding alt text to img tag inside picture

[jedifunk]

hoping i'm just missing something here, but doesn't look like alt text is possible currently.

i tried using img={{alt: {text.from.sanity}}} but that didn't work

[flayks]

I was wondering the same thing and did this, it works fine:

---
import { sanityClient } from 'sanity:client'
import imageUrlBuilder from '@sanity/image-url'
import SanityPicture, { setSanityPictureDefaults, type SanityPictureProps } from 'astro-sanity-picture'

const builder = imageUrlBuilder(sanityClient)
setSanityPictureDefaults({
    imageUrlBuilder: builder
})

interface Props {
    image: SanityPictureProps
    alt: string
    widths: number[]
    sizes: string
    props?: any
}
const { image, alt, sizes, widths, props } = Astro.props
---

<SanityPicture
    src={image}
    {widths} {sizes}
    img={{
        alt,
        ...props,
    }}
/>

then using it:

<SanityImage {image}
    alt="Something descriptive"
    widths={[400, 600]}
    sizes="(max-width: 550px) 85vw, 33vw"
/>