# `Expresso.Element.Image`
[🔗](https://github.com/rellen/expresso/blob/main/lib/expresso/element/image.ex#L1)

An element that shows an image

The `src` option gives the path of the image file, and the path is relative
to the working directory of the command, or to the `root` option of the
deck through `Expresso.PathTransformer`. `Expresso.Image` reads the file at
render time and makes a data URI, so the document of the deck stays one file.

The `alt` option gives the text of the image for a screen reader. An image
with no `alt` option is decorative, and the render function then writes an
empty `alt` attribute.

The `width` option gives the width of the image as a CSS width. The render
function writes the value into the custom property `--image-width` on the
root tag, and the theme reads that property. An image with no `width` option
takes its natural size, and the theme makes it smaller for a slide that is
too small.

Use a length, such as `"900px"`, or a percentage, such as `"60%"`. A
percentage is a part of the width of the slide.

The render function writes a percentage as a viewport unit, so `"60%"`
becomes `60vw`. CSS resolves a percentage against the container of the
image, and that container takes the natural width of the image. Therefore a
percentage in CSS makes an image smaller only, and `100%` changes nothing. A
slide takes the full width of the screen and of the page, so a viewport unit
gives the meaning that an author expects.

`Expresso.Element.viewport_unit/1` changes a value that is one number and a
percent sign only. The number takes each form that CSS permits, so `"60%"`,
`"33.5%"`, `".5%"`, `"+60%"` and `"6e1%"` each become a viewport unit. A
value such as `"calc(50% + 10px)"` holds a percentage inside a function, and
it goes into the document as it is.

# `t`

```elixir
@type t() :: %Expresso.Element.Image{
  __spark_metadata__: term(),
  alt: term(),
  at: term(),
  class: term(),
  easing: term(),
  effect: term(),
  el: term(),
  goto: term(),
  morph: term(),
  on: term(),
  signature: term(),
  speed: term(),
  src: term(),
  steps: term(),
  width: term(),
  window: term(),
  window_title: term()
}
```

The struct of an image

# `get_assigns`

```elixir
@spec get_assigns(t()) :: map()
```

Make the assigns of the render function from the struct

The key `overlay` holds the attributes of the overlay contract, from
`Expresso.Overlay.Render.attributes/1`, and the `style` attribute of the
`width` option. The key `src` holds the data URI of the file, and
`Expresso.Image.data_uri!/1` raises for a file that it cannot read. The key
`goto` holds the link of the `goto` option, or `nil`.

# `render`

```elixir
@spec render(map()) :: Phoenix.HTML.safe()
```

Make the HTML of an image

With the `goto` option, the image goes into a link. A screen reader then
reads the `alt` text as the name of the link, so give such an image an `alt`
option.

---

*Consult [api-reference.md](api-reference.md) for complete listing*