SharePoint online - JSON Tile not rendering image

vrm 696 Reputation points
2023-05-29T18:38:29.5833333+00:00

I developed the following code to make the entire tile a hyperlink. The tile is a behaving as desired, however Graphic is not rendering, just the grey background is visible. Help is appreciated.


{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 360,
  "width": 250,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation",
          "href": "[$Link]"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "display": "=if([$Graphic] == '', 'none', '')"
                        },
                        "attributes": {
                          "src": "[$Graphic]",
                          "title": "[$Graphic.desc]",
                          "class": "sp-card-imagePreview"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Note]"
                },
                "style": {
                  "word-break": "normal"
                },
                "txtContent": "=if ([$Note] == '', '–', [$Note])"
              }
            ]
          }
        ]
      }
    ]
  }
}
SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,276 questions
{count} votes

Accepted answer
  1. Ling Zhou_MSFT 15,475 Reputation points Microsoft Vendor
    2023-05-30T08:14:51.6733333+00:00

    Hi @vrm,

    Thank you for posting in the community. I tested your problem on my side.

    Please change the src of the image:

    "src": "[$Graphic.serverRelativeUrl]"
    

    This is the result of my test:

    enter image description here


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful