Doggo Storybook 0.9.0

Image

Renders an image with an optional caption.

Read more Read less

Usage

<.image
  src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
  alt="A dog wearing a colorful poncho walks down a fashion show runway."
  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 dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
Attribute Type Documentation Default Value
Required alt * :string A text description of the image for screen reader users and those with slow 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. 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 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. 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