How to display images in imageset dynamically from an array object in adaptiev cards?

Question

I have an array object like this:

    {
       "Items":[
          {
             "ShortName":"Product short name",
             "Image":"https://www.andrew.cmu.edu/user/cfperron/cats/images/cat8.jpg",
             "ManufacturerName":"MMM",
             "CatalogName":"cats"
          },
          {
             "ShortName":"Product2 short name",
             "Image":"https://www.andrew.cmu.edu/user/cfperron/cats/images/cat7.jpg",
             "ManufacturerName":"SSS",
             "CatalogName":"Dogs"
          }
       ]
    }

how to get Images in ImageSet dynamically in adaptive cards? I was able to get rest of the values in FactSet. But stuck with images.

Answer 1

Ok I figured it out.

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "size": "medium",
      "weight": "bolder",
      "text": "Search Results"
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ImageSet",
          "imageSize": "medium",
          "images": [
            {
              "type": "Image",
              "url": "${Image}",
              "size": "Medium"
            }
          ]

        },
        {
          "type": "FactSet",
          "facts": [
            {
              "title": "Short Name",
              "value": "${ShortName}"
            },

            {
              "title": "Supplier Name",
              "value": "${SupplierName} "
            },

            {
              "title": "Price ",
              "value": "${PriceAmount} "
            }
          ]
        }
      ],
      "$data": "${$root['Items']}"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2"
}

But next issue I am facing is if image url is empty, it throws an error "Adaptive Card Rendered error:

{
  "message": "Cannot read property 'style' of null"
}"

How can we give a null check inside adaptive card for Image property?