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. Example URL for the image path: jw/web/client/app/imageInList/1/form/download/sample/
   
2. Go to List Builder > Data and select Database SQL Query as a data source.
   
3. Go to Configure Database SQL Query and paste the following SQL query in the SQL SELECT Query section and set the Primary Key to id. 
   

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

   

4. Save the List.

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.

Video Tutorial

Download sample app