Show images in List

Introduction

In this article, you will learn how to display images from a form upload field in a list using the Database SQL Query List Data Store. This method allows you to show images directly within your list view by constructing HTML tags that reference the image URLs.

How does it work?

1. To display images in your list, you first need to obtain the path to the images. This path will be used to construct the image tags.
   
   
   
2. In your SQL query, you will construct the HTML <img> tag with the image URL. This is done by concatenating the base URL with the image path stored in your database.

Here is an example SQL query for a MySQL database:

SELECT id, c_title, c_image, concat("<img src='/jw/web/client/app/imageInList/1/form/download/sample/", id, "/", c_image, ".'/>") as 'image',
concat("<img src='/jw/web/client/app/imageInList/1/form/download/sample/", id, "/", c_image, ".thumb.jpg'/>") as 'imagethumb' FROM app_fd_sample

Expected outcome

This query retrieves the image path and constructs the appropriate HTML tags for displaying the image and its thumbnail.

The resulting HTML tags are rendered in the list, showing the images directly in the list view.

Download sample app