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>
Default Open in playground
A dog wearing a colorful poncho walks down a fashion show runway. 
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio={{16, 9}} src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
Caption Open in playground
A dog wearing a colorful poncho walks down a fashion show runway.
Spotlight on canine couture: A dog fashion show where four-legged models dazzle the runway with the latest in pet apparel.
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio={{16, 9}} src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true">
  <:caption>Spotlight on canine couture: A dog fashion show where four-legged models dazzle the runway with the latest in pet apparel.</:caption>
</.image>
Ratio Open in playground
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. 
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio={nil} src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="1-by-1" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="3-by-2" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="2-by-3" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="4-by-3" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="3-by-4" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="5-by-4" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="4-by-5" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="16-by-9" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>
<.image alt="A dog wearing a colorful poncho walks down a fashion show runway." ratio="9-by-16" src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"/>