# `PhoenixImage.Component`
[🔗](https://gitlab.com/clschnei/phoenix_image/blob/v0.1.0/lib/phoenix_image/component.ex#L2)

Next.js-like image function component for Phoenix templates.

Import this module and use:

    <.image src="/images/logo.png" alt="Logo" width={240} height={120} />

# `image`

## Attributes

* `src` (`:string`) (required)
* `alt` (`:string`) (required)
* `width` (`:integer`) - Defaults to `nil`.
* `height` (`:integer`) - Defaults to `nil`.
* `fill` (`:boolean`) - Defaults to `false`.
* `sizes` (`:string`) - Defaults to `nil`.
* `quality` (`:integer`) - Defaults to `nil`.
* `format` (`:string`) - Defaults to `"webp"`. Must be one of `"webp"`, `"avif"`, `"jpg"`, or `"png"`.
* `loading` (`:string`) - Defaults to `"lazy"`. Must be one of `"lazy"`, or `"eager"`.
* `preload` (`:boolean`) - Defaults to `false`.
* `unoptimized` (`:boolean`) - Defaults to `false`.
* `upscale` (`:boolean`) - Defaults to `false`.
* `path` (`:string`) - Defaults to `nil`.
* `allowed_hosts` (`:list`) - Defaults to `nil`.
* Global attributes are accepted.

# `image_attrs`

Returns normalized `<img>` attributes for the given image assigns.

---

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