# `Storehouse.Components`
[🔗](https://github.com/hattoriai/storehouse/blob/v0.2.0/lib/storehouse/components.ex#L2)

Function components for HEEx, from `Storehouse.Responsive`'s data.

    import Storehouse.Components

    <.img file={@photo.image} preset={:photo} sizes="(min-width: 60rem) 60rem, 100vw" alt={@photo.caption} />

# `img`

An `<img>` of `file` with `preset`'s sizes (`Storehouse.Responsive.resolve/3`):
its `src`, `srcset`, `sizes`, `width` and `height`, and its placeholder
and colour painted under it while it loads, when its analysis has them.

## Attributes

* `file` (`Storehouse.File`) (required)
* `preset` (`:atom`) (required)
* `sizes` (`:string`) - the layout's slot for it, at each screen's width. Defaults to `nil`.
* `src` (`:integer`) - the width of `src`, for a browser without `srcset`. Defaults to `nil`.
* `placeholder` (`:boolean`) - paint the placeholder and colour under it while it loads. Defaults to `true`.
* `options` (`:list`) - `Storehouse.Variants.url/3`'s. Defaults to `[]`.
* Global attributes are accepted. Supports all globals plus: `["alt", "loading", "decoding", "fetchpriority", "crossorigin", "referrerpolicy"]`.

---

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