How do display image from an Image column in a custom row formatter

Question

I have a list with an Image column and 3 descriptor fields. I want to create a custom display that has the image in section 1 and the 3 descriptors stacked in section 2. I can't figure out how to get the image to display.

   "elmType": "img",
   "style": {"width": "150px","height": "125px"},
   "attributes": {"src": "[$myImage]"}

The idea is to display the image associated with the list item.

I've seen many examples where the src value is coded to a specific image. That's not the purpose here. Think product catalog.

So - how do I get the image to display?

Answer 1

You have to use the [$myImage.serverRelativeUrl] instead of [$myImage] to get the image URL & show it using JSON Formatting.

Documentation: Special string values - Check "Image fields" section.

Related Read: SharePoint Online: All you need to know about New Image column type