# display-photo

## Overview

{% hint style="info" %}
**Version compatibility**

The `display-photo` component was visually updated in version **4.74.0** of JourneyApps Runtime.
{% endhint %}

Displays an existing photo that was previously captured.

### Basic Example

```xml
<var name="plant_assembly" type="photo" />

<display-photo bind="plant_assembly" label="Assembly" />
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-a3395417577b126756b3f9b41a968e1521752d82%2Fdisplay-photo-example.png?alt=media)

## Standard Attributes

### `bind`

{% content-ref url="../xml-fields/bind" %}
[bind](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/bind)
{% endcontent-ref %}

### `label`

{% content-ref url="../xml-fields/label" %}
[label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label)
{% endcontent-ref %}

## Advanced Attributes

### `align-content`

{% content-ref url="../xml-fields/align-content" %}
[align-content](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-content)
{% endcontent-ref %}

### `align-controls`

{% content-ref url="../xml-fields/align-controls" %}
[align-controls](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-controls)
{% endcontent-ref %}

### `align-label`

{% content-ref url="../xml-fields/align-label" %}
[align-label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-label)
{% endcontent-ref %}

### `control-order`

{% content-ref url="../xml-fields/control-order" %}
[control-order](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/control-order)
{% endcontent-ref %}

### `downloadable`

See [`capture-photo` > `downloadable`](https://docs.journeyapps.com/reference/build/ui-components/capture-photo#downloadable)

### `fullwidth`

See [`capture-photo` > `fullwidth`](https://docs.journeyapps.com/reference/build/ui-components/capture-photo#fullwidth)

### `id`

{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}

### `label-case`

{% hint style="info" %}
**Version compatibility**

`label-case` was introduced in version **4.80.0** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/label-case" %}
[label-case](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-case)
{% endcontent-ref %}

### `label-color`

{% content-ref url="../xml-fields/label-color" %}
[label-color](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-color)
{% endcontent-ref %}

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

## Component Methods

The following component methods are available when an [`id`](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id) is assigned to the component and `component.displayPhoto({id:'my-id'})` is called from JS/TS:

### `closeMedia`

See [`capture-photo` > `closeMedia`](https://docs.journeyapps.com/reference/build/ui-components/capture-photo#closemedia)

### `downloadMedia`

See [`capture-photo` > `downloadMedia`](https://docs.journeyapps.com/reference/build/ui-components/capture-photo#downloadmedia)

### `openMedia`

See [`capture-photo` > `openMedia`](https://docs.journeyapps.com/reference/build/ui-components/capture-photo#openmedia)

### `scrollIntoView`

See [`capture-photo` > `scrollIntoView`](https://docs.journeyapps.com/reference/build/ui-components/capture-photo#scrollintoview)