# display-image

## Overview

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

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

### Basic Example

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

<display-image bind="assembly_image" />
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-100eca4de7931421d05ed2873ede4424dc0c8247%2Fdisplay-image-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 %}

{% hint style="info" %}
Use `src` to display an image asset.
{% endhint %}

{% hint style="warning" %}
`display-image` cannot have both `src` and `bind` attributes.
{% endhint %}

### `src`

**Optional**

**Type**: `string`

**Default**: unset

`src` can be used to display an image asset rather than a `photo` field or variable (assets are uploaded via OXIDE).

```xml
<display-image src="images/company_logo.png"/>
```

{% hint style="info" %}
Use `bind` to display a `photo` field or variable.
{% endhint %}

{% hint style="warning" %}
`display-image` cannot have both `src` and `bind` attributes.
{% endhint %}

## Advanced Attributes

### `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 %}