Doggo Storybook 0.10.2

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

 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