Why does my image not display?

When you're looking to display an image, there are two main ways that you can do this.

1. Dynamically load an image from a data model

2. Statically load an image from an image upload

In this FAQ, we will cover common issues that occur when attempting to load an image dynamically from a data model.

Loading an image from a data model

To load an image from a data model that you've created, you need first to add an attachment column to your data model. Next, you need to add an image to the data model.

The attachments field is a special field inside Dittofi. You can use it to store images as either a single image or as collection of multiple images.

Note, if the image does not display inside your data model, it is likely that this is because the size of the image is too big. You can try editing the image locally to make it smaller.

Next, you need to create a get endpoint and an associated action, workflow and create a variable in the frontend to store your image or images that are being returned. For more information on how to do this, read how to Read Existing Records.

Next, follow the steps.

Step 1. Add container elements to your page. In our example, we choose a container and a div block.

Step 2. Assign your parent element to a repeating associate your parent element with a repeating group. In our case we pick the div block.

Step 3. Add an image element inside of your div block.

Step 4. *Critical step* - Turn your image element into a repeating group.

The reason that you need to set up multiple repeating groups on an image is because within each row, the attachments field is a lists or collections of attachments. Therefore the system is needs to know that it's trying to display a list here.

If you pop open the image settings, you can select the Repeating With option and bind this to the row and your attachments field. This could be either the "Single Image" field or "List of images" field in our example.

Step 5. After you've turned your image element into a repeating group, you need to bind your image element "Src" or source, to your the image URL. To do this, click on "Src" and you'll see that a new variable has been created within your repeating group of type "system custom model". To display your single image or list of images, you need to bind choose the URL field.

Step 6. Make sure that your workflow is being triggered "on app mount".

Step 7. lastly, you can build your code and test it. Now you will see your image display on the screen.