How to add an image to a column based on the value of another column (and have it show correctly in Gallery view)?

Question

Desired Behavior:

1. Display an image in the column My Image based on the value in the column Model.

   My Image is type Picture (I also tried making it type Image but got the same outcome).

   Model is type Managed Metadata.

2. When clicking on the image, open the image in a new tab.

3. In Gallery view, when list entries are displayed as cards, the image is visible on the card.

Actual Behavior

Desired behavior 1 and 2 is working, 3 is not.

What I've Tried:

Below are various stages of applying column formatting to the My Image column.

GOOD: This displays the managed metadata column value:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "[$Model]"
}

GOOD: This displays the image path as text, based on the value in the Model column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')"
}

GOOD: This display the image, based on the value in the Model column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
  "src": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')"
  }
}

GOOD: This makes the image a link and adds some styling:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')",
    "target": "_blank"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "padding": "0",
        "width": "100px"
      },
      "attributes": {
        "src": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')"
      }
    }
  ]
}

All of these things are working.

BAD: The only thing that is not working is that the image is not displaying in Gallery view.

For troubleshooting, below is a comparison of the HTML and CSS of the image section in the card:

Normal Picture:

<div class="sp-card-previewColumnContainer">
    <div class="sp-card-imageContainer">
        <div class="ms-bgColor-neutralLight sp-card-imagePreviewBackground">
            <img style="display:;" src="https://my-tenant.sharepoint.com/sites/my-site/SiteAssets/Lists/letters-and-numbers/computer_model_1.png" title="computer_model_1.png" class="sp-card-imagePreview">
                <svg style="display:none;" preserveAspectRatio="none" viewBox="0 0 210 105" class="sp-card-defaultImage ms-bgColor-themeLighter" focusable="false">...</path>
            </svg>
        </div>
    </div>
</div>

Dynamically Added Picture:

<div class="sp-card-previewColumnContainer">
    <div class="sp-card-imageContainer">
        <div class="ms-bgColor-neutralLight sp-card-imagePreviewBackground">
            <img style="display:none;" src="" title="" class="sp-card-imagePreview">
                <svg style="display:;" preserveAspectRatio="none" viewBox="0 0 210 105" class="sp-card-defaultImage ms-bgColor-themeLighter">...</svg>
        </div>
    </div>
</div>

Related Reading:

Populate Column with IMAGE based on another column's content

In a Sharepoint List: Display an Image (field type “Hyperlink or Picture”)

Apply conditional formatting

Add conditional images in a column (SharePoint Online list)

Update

For reference, after first answer, I tried the following:

I searched for sp-card-previewColumnContainer and looked for the next elmType of img and could see it had a style > display of =if([$Image] == '', 'none', ''), so I removed that style object, and then I could see "src": "[$Image]", "title": "[$Image.desc]", "class": "sp-card-imagePreview" so I replaced the src value with the if conditional I used in the column formatting, and just changed the description to hello world. the next two svg objects also had the display:none styling so I removed those objects as well. The result was good, except there was a little icon in the middle of each card. I put back those style objects on the last two svg's, but it still displayed the same:

In the JSON above, [$Image] is my Picture column.

Update 2

I removed the children array that contained the following, and it seems to have worked, ie got rid of those little icons.

sp-card-defaultImageOverlay-path1

sp-card-defaultImageOverlay-path2

sp-card-defaultImageOverlay-path3

sp-card-defaultImageOverlay-path4

Answer 1

As you are showing the image dynamically using JSON in column formatting, it is working fine in list view.

But, JSON formatting only displays the value/image in list view >> It does not store the actual value in list columns.

So, to show the image in Gallery view, you have to replicate the same logic (used in column formatting) in auto-generated JSON code of gallery view.

To open the JSON code of gallery view, follow below steps:

1. Go to your SharePoint list

2. Click on switch view options dropdown at the top & select Format current view.

   

3. Make sure Format view & Gallery is selected like below:

   

4. Click on Edit card & then select Advanced mode

---

Additional reference:

1. Change the width of a card in Gallery view of a List