# Image

> A user image on the screen, fitted four ways, optionally swapped by an Image variable.

**Image** shows one of your imported pictures: a machine photo, a plant schematic, a
company mark. The picture is either static or driven by an Image-output Logic variable,
so what is on screen can follow the plant (a different diagram per active recipe, a
state picture per machine mode). It is a *Media* component; a new one occupies
4 × 4 cells.

Images are imported in **Logic ▸ Assets ▸ Images**; the component only picks from that
library. With nothing chosen and nothing bound, the cell says "No image" instead of
standing empty.

## Content {#content}

| Field | What it does | Values | Default |
|---|---|---|---|
| Default image | The static picture, and the editor's fallback while a variable is bound. `(none)` shows the placeholder. When the library is empty and no variable is bound, the panel says where to import one. | `(none)` or an image asset | `(none)` |

## Data {#data}

| Field | What it does | Values | Default |
|---|---|---|---|
| From Image variable | A rooted address of an Image-output Logic variable. The list names each one by its name, or by its folders and its name when it is filed in a folder (Oven / Door), and stores its address with those folders (`Variables.Oven.Door`). Bound, the component renders whatever asset the variable currently resolves to; the value-to-image logic, and its required default, live in the variable (see the [Logic page](logic)). `(none)` clears the bind. | An Image variable, or `(none)` | `(none)` |

Under the field, the panel confirms the binding with the picture itself (a thumbnail
of the asset the variable resolves right now), because an asset id says nothing about
the image it stands for.

While a variable is bound, a point that fails to read (unresolved address, or bad
quality) drops the picture to the placeholder and wears the shared bad-reading mark:
the stale asset the variable last held must not stand on screen as if it were a
reading.

## Fit {#fit}

| Field | What it does | Values | Default |
|---|---|---|---|
| Fit | How the picture meets the box it was given. Each option carries a preview of the result, because the four names alone say nothing an operator can picture. | `Uniform`: kept whole at its own proportions, shrunk as needed to fit; never enlarged past its natural size · `UniformToFill`: fills the box, proportions kept, overflow cropped · `Fill`: stretched to the box exactly, proportions not kept · `None`: the picture at its own size; one larger than the box shrinks whole, so today it draws the same as `Uniform` | `Uniform` |

Image is a display component: it commands nothing and never wears the lock mark. The
shared Appearance, Identification, Position and layer and Actions sections are described
on the [components page](components#the-shared-property-sections).