Configure an image column on Power Pages

An image column stores an image file in a column in a Microsoft Dataverse table. Add an image column to a form to upload, view, modify, and delete images. The form shows a thumbnail of the image if one is available.

Note

You can't upload a image file by using insert mode on a basic form or an multistep form step.

Image URL

The image URL indicates the full URL of where the image is stored. This can be used for development and troubleshooting.

An image URL takes the following form:

{0}/Image/download.aspx?entity={1}&attribute={2}&id={3}

where:

  • {0} is the website URL

  • {1} is the logical name of the entity

  • {2} is the logical name of the column

  • {3} is the image ID

For example, if your website is located at https://contososite.powerappsportals.com, your code will look like this:

https://contososite.powerappsportals.com/Image/download.aspx?entity=contact&attribute=entityimage&id=cb059a4a-b1a6-ec11-9840-00224829604e

Liquid

You can design a website using Liquid code to retrieve records from Dataverse tables. Use fetchXML and the Entity view to fetch image column values, like this:

    {% for item in tables.results.entities %}
        {{ item.columnname.Type }}
        {{ item.columnname.Size }}
        {{ item.columnname.Url }}
        {{ item.columnname.Value }}
    {% endfor %}

where:

  • Type is the mime type of the image

  • Size is the image size in bytes

  • Value is the image value as a base64 string

  • Url is the image URL

Example: Retrieve a default contact image

    {% fetchxml contacts %}
        <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
            <entity name="contact">
                <attribute name="fullname"/>
                <attribute name="entityimage"/>
            </entity>
        </fetch>
    {% endfetchxml %}

    {% for item in contacts.results.entities %}
        {
            "Full Name":"{{ item.fullname }}"
            "Entity Image Type":"{{ item.entityimage.Type}}",
            "Entity Image Size":"{{ item.entityimage.Size}}",
            "Entity Image Url":"{{ item.entityimage.Url}}",
            "Entity Image Value":"{{ item.entityimage.Value}}"
        }
    {% endfor %}

Web API

The portals Web API can be used to create, read, update, and delete images in image columns across Dataverse tables.

Retrieve image data

To download thumbnail image data, use the following API call:

    GET /_api/<entity-type>(id)/<image-attribute-name>/$value

Image data transferred from the web service endpoints is limited to a maximum of 16 MB in a single service call.

Example: Download a thumbnail

In the following example, we'll use a GET call to download a thumbnail if it exists.

HTTP request:

    GET [website url]/_api/accounts(62d53214-9dfa-eb11-94ee-0022482230a8)/entityimage/$value
    
    Headers:
    Content-Type: application/octet-stream

HTTP response:

    204 No Content
    
    Body:
    Byte[ ]

In this example, the thumbnail doesn't exist and so no image is returned. If a thumbnail did exist, the response would return a byte array with values.

Upload image data

To upload an image, set the value of the image column to a byte array that contains the content of the image file:

    PUT or PATCH /_api<entity-type>(id)/<image-attribute-name>

Example: Upload an image

HTTP request:

    PUT [website url]/_api/accounts(62d53214-9dfa-eb11-94ee-0022482230a8)/entityimage

    Headers:
    Content-Type: application/octet-stream
    
    Body :
    Byte [ ]

Upload profile images

Authenticated website users can upload their picture in the profile section of the website. The image is saved in the Entity Image column of the corresponding contact record in Dataverse. Users can upload images up to 10 MB.

Create site settings

First, you must create a site setting to allow authenticated users to upload a profile picture:

  1. Open the Portal Management app

  2. Under Website, select Site Settings.

  3. Create a setting called Profile/ShowImage, and set its value to true. (If the setting exists, set its value to true.)

    Screenshot of the Profile/ShowImage site setting.