Adding attributes to img tag for Picture component
#Adding attributes to img tag for Picture component
glacial vale
ember eagleBOT
Hi @glacial vale. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Astro's <Picture /> component, attributes applied directly to the component will be applied to the inner <img> element. For example, if you want to add a class or alt attribute to the <img> tag, you can do so by adding these attributes directly to the <Picture /> component.
Here's an example:
<Picture src={myImage} alt="A description of my image." class="my-class" />
In the above example, the alt and class attributes will be applied to the inner <img> element.
However, if you want to add attributes to the outer <picture> element itself, you can use the pictureAttributes property. This property accepts an object of attributes to be added to the <picture> tag.
Here's an example:
<Picture src={myImage} alt="A description of my image." pictureAttributes={{style: "background-color: red;"}} />
In this example, the style attribute will be applied to the outer <picture> element.
Sources:
- Astro Documentation - Picture Properties (https://docs.astro.build/en/guides/images#properties-1)
- Astro API Reference - Picture (https://docs.astro.build/en/reference/api-reference#picture-)