---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: image
layout: subsection
wd_wcptag: image
---

<a id="section_N10021_N1001E_N10001"></a>
Displays an image.

Use `image` on view and edit pages.

Avoid using base64-encoded image strings with the `image` tag. The serialized PMD objects on the server have a 100K size limitation. If you use the `imageUri` attribute with a base64-encoded image string, the PMD becomes nonfunctional if the serialized PMD exceeds the limit. Instead of using a base64-encoded image string, Workday recommends that you upload the image asset on a server and point to its server URI using the `imageUri` attribute.

## <a id="section_llf_rnm_xpb"></a>Example

This sample `image` renders if its associated object exists, and displays the image returned by the specified endpoint.

```
{
  "type": "image",
  "sizingHint": "INLINE",
  "endPoint": {
    "url": "<% 'charityImages/' + charity.image.id %>",
    "baseUrlType": "app",
    "authType": "sso"
  },
  "render": "<% !empty(charity.image) %>"
}
```

The sample <i>charity</i> endpoint:

```
{
 "name": "charity",
 "baseUrlType": "app",
 "url": "<% 'charities/' + queryParams.charityId %>",
 "authType": "sso"
}
```

This next example is an `onChange` event handler that dynamically updates the `imageUri`:

```
"script": "<%
   var updateStatusImage = function(ready) {
      if (ready) {
          statusImage.imageUri = pageVariables.readyImageUri;
      } else {
          statusImage.imageUri = pageVariables.inProgressImageUri;
      }
   }
 %>"
```

The sample `checkBox` with the `onChange` event, and the sample `image` widget:

```
{
 "type": "checkBox",
 "id": "readyToggle",
 "label": "Check if document is ready:",
 "onChange": "<% updateStatusImage(readyToggle.value) %>"
},
{
 "type": "image",
 "id": "statusImage",
 "label": "Ready?",
 "imageUri": "<% pageVariables.inProgressImageUri %>"
}
```

## <a id="section_lg4_v1g_khb"></a>Mobile Support

Android, iOS

## <a id="section_qpw_1kc_ccb"></a>Attributes

-   <b>endPoint</b>

    Data type: endPoint

    A REST endpoint that returns and displays an image.

    Example:

    ```
    "endPoint": {
       "url": "<% 'charityImages/' + charity.image.id %>",
       "baseUrlType": "app",
       "authType": "sso"
    }
    ```

    <b>Note:</b> The `endPoint` and `imageUri` attributes are mutually exclusive. If you specify both attributes, `endPoint` takes precedence.

    For a complete list of `endPoint` attributes, see the <i>Attributes</i> section in [endPoints](/wcp_docs/ujr1530565661647.html).

-   <b>id</b>

    Data type: binding-String

    Unique identifier used to reference this widget from other tags.

    Notes:

    -   The `id` must start with a letter.
    -   The `id` must be unique per page.
    -   To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD.
    -   Workday recommends that you include the `id` in your tag definitions for debugging purposes.

-   <b>imageUri</b>

    Data type: binding-String

    URI of the image you want to display. Specify the location of your image.

    If you use the imageUri attribute with a base64-encoded image string, the PMD becomes non-functional if the serialized PMD exceeds the limit. Instead of using a base64-encoded image string, Workday recommends that you upload the image asset on a server and point to its server URI using the imageUri attribute.

    <b>Note:</b> The `imageUri` and `endPoint` attributes are mutually exclusive. If you specify both attributes, `endPoint` takes precedence.

-   <b>render</b>

    Data type: binding-Boolean

    If true, this tag renders as a widget on the page. If false, the loaded page doesn't add this tag or its children. The default is true.

    Unlike the `visible` attribute, when `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag can't reference other tags regardless of the `render` attribute value.

-   <b>sizingHint</b>

    Data type: string

    Specifies the sizing hint for determining the image size. Valid values:

    -   `INLINE` - The image renders inline with the maximum size possible based on the screen and page layout. `INLINE` is the default behavior.
    -   `THUMBNAIL` - The image renders in a smaller scale. Not supported in the Workday mobile app.
    -   `LARGE` - The image renders in a larger scale. Not supported in the Workday mobile app.

-   <b>sortOrder</b>

    Data type: binding-String

    When you set `sorted` to true on the `section` or `fieldSet` parent of this widget, the `sortOrder` attribute determines the order of this widget within its parent. The sort order is relative to the siblings of the widget.

    Typical values are "a", "b", "c", and so on. Example: The widget with `"sortOrder": "a"` displays before the widget with `"sortOrder": "b"`.

    <b>Note:</b> The `sortOrder` doesn't apply to sorting data on the widget. `sortOrder` only applies to the placement order of the widgets within the parent widget.

-   <b>userPhoto</b>

    Data type: binding-Boolean

    If true, we display the image in a round or oval shape.



## <a id="section_vgm_3qc_yrb"></a>PMD Scripting Methods

-   <b>getImageUri()</b>

    Return type: `string`

    Description: Returns the URI location of the image.

    Use `getImageUri` on an `image` tag that uses the `imageUri` attribute. You can't call `getImageUri` if the `image` tag uses the `endPoint` attribute.

-   <b>setEndPointUrl(string)</b>

    Return type: `void`

    Description: Sets the `url` of the endpoint that displays the image. You can only set the `url` attribute of the endpoint. An updated `url` uses the existing `baseUrl` and `authType` attributes of the endpoint.

    Use `setEndPointUrl` on an `image` tag that uses the `endPoint` attribute. Note that if you use both the `endPoint` and `imageUri` attributes on the `image` tag, `setEndPointUrl` ignores `imageUri`.

-   <b>setImageUri(string)</b>

    Return type: `void`

    Description: Sets the URI location of the image.

    You can't call `setImageUri` if the `image` tag uses the `endPoint` attribute.

    Use `setImageUri` on an `image` tag that uses the `imageUri` attribute. You can't call `setImageUri` if the `image` tag uses the `endPoint` attribute.