Doggo Storybook 0.15.1

Introduction
Buttons
Data
Feedback
Form
Layout
Media
- Avatar
- Carousel
- Frame
- Icon
- Icon Sprite
- Image
Menu
Miscellaneous
Navigation

Image

Renders an image with an optional caption.

Usage

<.image
  src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
  alt="A gray-muzzled dog in a camouflage coat and harness."
  ratio={{16, 9}}
>
  <:caption>
    Spotlight on canine couture: A dog fashion show where four-legged models
    dazzle the runway with the latest in pet apparel.
  </:caption>
</.image>

A gray-muzzled dog in a camouflage coat and harness.

Attribute	Type	Documentation	Default
Required alt *	:string	A text description of the image for screen reader users and those with slow Read more Read less
internet. Effective alt text should concisely capture the image's essence and function, considering its context within the content. Aim for clarity and inclusivity without repeating information already conveyed by surrounding text, and avoid starting with "Image of" as screen readers automatically announce image presence.
class	:any	Any additional classes to be added. Read more Read less	[]
Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings.
height	:integer
loading	:string		"lazy"
ratio	:string
rest	:global	Any additional HTML attributes.
sizes	:string	Specifies media conditions for the image widths, if the `srcset` attribute Read more Read less
uses intrinsic widths. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes.
Required src *	:string	The URL of the image to render.
srcset	:any	A set of image URLs in different sizes. Can be passed as a string or a map. Read more Read less
For example, this map: %{ "1x" => "images/image-1x.jpg", "2x" => "images/image-2x.jpg" } Will result in this `srcset`: "images/image-1x.jpg 1x, images/image-2x.jpg 2x" See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset.
width	:integer
caption	:slot