How to bind static images in gallery control in Canvas App?

Issue:

Recently I was working in Canvas App, Power Apps. We needed to prepare a mock up for a simple product app. In that we have 3 screens – Dashboard, Edit and New Item screen. For Dashboard, we were given dummy product images and content like product name and description.

So, I started working on that. I uploaded images in the media. I created a Table for data and tried to bind in the Gallery control. but I faced a strange issue. The Image was not rendering. Below was my table creation code on the app on-start event:

 Set(ProductsData,Table(  
   {  
     ProductTitle:"Green Tea Cinnamon",  
     ProductDescription:"Served hot or iced, this green tea contains cinnamon and ginger with a touch of mint for a refreshing taste. Naturally sweetened with apple juice, this tea is a great alternative to sugar-filled teas",  
     Image:"Contoso Tea(4)"  
   },  
    {  
     ProductTitle:"Green Tea Rose",  
     ProductDescription:"GREEN TEA with ROSE is a green tea base blended beautifully flavoured with Rose petals giving fresh delicate taste with aromatic rose scent reminiscent of Turkish delight. This is a lovely delicate green tea that must be tried! DO NOT USE BOILING WATER on any GREEN tea as it will make it taste bitter.",  
     Image:"Contoso Tea(12)"  
   },  
    {  
     ProductTitle:"Green Tea Mint",  
     ProductDescription:"Mint green tea can help improve digestion and relieve symptoms of indigestion, bloating, and gas. It may help boost the immune system and protect against infections. Mint green tea can help improve mental clarity and focus, as well as reduce stress and anxiety.",  
     Image:"Contoso Tea(14)"  
   }  
   ))  

Solution:

In such situation, I am getting poor in searching for solution. Whatsoever terms I search in google; I find out something new but not the solution. Most of the blogs are written on how to bind image from SharePoint. So, I am writing this blog to help myself and others in future.

So, I go to learn the basic and search how to bind image in control and I found solution in Power Apps community question that was mentioning how to bind dynamic image on gallery. I found that the issue is with the syntax. When you need to bind such things that Power Apps needs to resolve from itself, we need to use single quote (‘) instead double quote when you create your data source. So, the correct data structure will be as follow:

 Set(ProductsData,Table(  
   {  
     ProductTitle:"Green Tea Cinnamon",  
     ProductDescription:"Served hot or iced, this green tea contains cinnamon and ginger with a touch of mint for a refreshing taste. Naturally sweetened with apple juice, this tea is a great alternative to sugar-filled teas",  
     Image:'Contoso Tea(4)'  
   },  
    {  
     ProductTitle:"Green Tea Rose",  
     ProductDescription:"GREEN TEA with ROSE is a green tea base blended beautifully flavoured with Rose petals giving fresh delicate taste with aromatic rose scent reminiscent of Turkish delight. This is a lovely delicate green tea that must be tried! DO NOT USE BOILING WATER on any GREEN tea as it will make it taste bitter.",  
     Image:'Contoso Tea(12)'  
   },  
    {  
     ProductTitle:"Green Tea Mint",  
     ProductDescription:"Mint green tea can help improve digestion and relieve symptoms of indigestion, bloating, and gas. It may help boost the immune system and protect against infections. Mint green tea can help improve mental clarity and focus, as well as reduce stress and anxiety.",  
     Image:'Contoso Tea(14)'  
   }  
   ))  

Once I fixed the syntax, my images started showing in the gallery.

Reference:

• https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-dynamically-change-Gallery-Image/td-p/942875