Image column not behaving in SharePoint Online List with Custom Format

Question

I am trying to allow users to include a thumbnail in a list. Since most users will not have general upload permissions anywhere on the site, this will be done through two fields: Attachments, and a picture column named "Thumb Image" (It's actually a "Hypertext or Picture" column with "Format URL as" set to "Picture"). They will upload the attachment, then get the link, and add it in as the URL in "Thumb Image". I then want the image to show up in the list view using the JSON "Format Current View" feature. If there is nothing in the "Thumb Image" column, I will display an icon instead.

The Problem:

The if() I'm using always returns false, as length([$ThumbImage] always seems to return 0. And when I try to just display the image anyways by removing the if(), the src in the image tag ends up being (unknown)

Here's the view-formatting JSON. My actual format rules are much bigger and more complex, but I've created this view in order to rule out any problems from that complexity, and the problem still exists:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "rowFormatter": {
        "elmType": "div",
        "attributes": {
            "class": "ms-bgColor-themePrimary ms-borderColor-black"
        },
        "style": {
            "margin": "10px"
        },
        "children": [
            {
                "elmType": "div",
                "attributes": {
                    "iconName": "HomeVerify",
                    "class": "ms-fontSize-su ms-fontWeight-regular  ms-fontColor-white",
                    "title": "[$Category]"
                },
                "style": {

                    "display": "=if(length([$ThumbImage]) == 0, 'block', 'none')"
                }
            },
            {
                "elmType": "img",
                "attributes": {
                    "src": "[$ThumbImage]",
                    "title": "[$Category]"
                },
                "style": {
                    "max-height": "68px",
                    "display": "=if(length([$ThumbImage]) > 0, 'block', 'none')"
                }
            }
        ]
    }
}

In place of [$ThumbImage], I've tried using [$ThumbImage.Url] and [$ThumbImage.desc] but it always messes up. When I look it up in PowerShell, $item["ThumbImage"] works, so it doesn't seem like my identifier is wrong.

One really weird thing:

With this setup, if I edit an item and add or change the "Thumb Image" field (either the URL or Display Text), then the image shows up as expected. But as soon as I refresh the page, or view from a different browser, the image is gone again. Even selecting the row and opening and closing the details pane a few times makes the image show up!

After editing the thumb image or toggling the details pane a few times:

<img style="max-height:68px;display:block;" src="/sites/MembersHub/Lists/Classifieds/Attachments/21/Burnsville%20house%20ad%20for%20non%20CMA_Page_1.jpg?web=1" title="Hospitality">

Then, after refreshing the page:

<img style="max-height:68px;display:none;" src="" title="Hospitality">

This is just too weird, and the methods I usually use to debug things like this in PHP (like var_dump()) don't seem to have equivalents in this limited JSON-based context.

Any help you can offer would be great!

Answer 1

...Aaaaand of course, after working on this for two days, I post a question on here and then find the answer in 22 minutes. So for everyone having a problem like this:

You have to show the Column to use it in a custom view format!

I had set the Thumb Image column to be hidden in this view, and then was wanting to reveal it using the View Formatting JSON. You can't do that.

My reasoning for hiding the column is that I was going to leave the headers showing instead of hiding them so users could sort/group by a column of their choosing. The Thumbnail column is not useful for sorting/grouping, so I chose to omit it. Well, that's where my problems came from!