How to Display Images in Grid Column Using URL or Direct Image

This article will guide you on how to display an image in a grid column as part of a record set. You can display a thumbnail image for each record in addition to the data, using either a URL to the image or the image itself.

Steps to Display Images in Grid Column Using URL

1. Bind the image from the database to the Grid widget by creating an expression column with an Image tag. Here’s an example of how to do this:

<img src="URL_TO_IMAGE" alt="Image Description" width="100" height="100">

CONCAT('<img src="',[Column_Name],'" width="100" height="100"> </img>')

2. Replace URL_TO_IMAGE with the actual URL of the image you want to display. You can also adjust the width and height attributes to fit your desired dimensions.

Steps to Display Images in Grid Column Using Direct Image

1. Convert the image to a Base64 encoded string. You can use online tools like Base64 Image Encoder to convert your image to a Base64 string.
2. Bind the Base64 encoded image string from the database to the Grid widget by creating an expression column with an Image tag. Here’s an example of how to do this:

   <img src="data:image/png;base64,BASE64_ENCODED_IMAGE_STRING" alt="Image Description" width="100" height="100">
   

3. Replace BASE64_ENCODED_IMAGE_STRING with the actual Base64 encoded string of the image you want to display. You can also adjust the width and height attributes to fit your desired dimensions.

Refer to the sample dashboard provided below to see how this requirement can be achieved:
Sample Dashboard

By following these steps, you can successfully display an image in a grid column as part of a record set using either a URL or a direct image.

Additional References

• Grid Widget Documentation
• Expression Columns Documentation