- 1.5.0

Image

Renders an image with an optional caption.

Read more Read less

The component uses the frame component for the image's box. The frame needs to be built before the image.

build_frame()
build_image()

To use a frame build with a different name, set the frame option.

build_frame(name: :media_frame, ratios: ["21:9"])
build_image(frame: &__MODULE__.media_frame/1)

Maturity: Developing

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>
    Canine couture, spring collection: the season's boldest silhouettes, worn
    on four legs.
  </:caption>
</.image>
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
A gray-muzzled dog in a camouflage coat and harness.
Attribute Type Documentation Default Value
Required alt * :string

A text description of the image for screen reader users and those with

 Read more Read less

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.

 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

The aspect ratio of the image's box. The value is passed to the

 Read more Read less

frame component.
rest :global

Any additional HTML attributes.
sizes :string

Specifies media conditions for the image widths, if the srcset

 Read more Read less

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

 Read more Read less

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