This problem is very similar to this one, except it's not displaying images and I'm using different JSON code.
Using SharePoint Online, I have a list I use specifically to display customised buttons and tiles dynamically using JSON formatting.
For one such view I am trying to display a tile with an image. This seems to work ok (i.e. tiles are displayed, with the appropriate text, and links are functioning correctly). The problem, however, is that images aren't displaying, and I'm at a loss as to why. I suspect it's going to be something very simple.
In any case, the list columns being referenced for my particular JSON code are Title, Category, URL and Image. All are of type 'Single line of text' except for the Image column which is of type 'Image'.
Below is my JSON code. Any help would be most appreciated.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"hideSelection": true,
"height": 200,
"width": 250,
"groupProps": {
"headerFormatter": {
"elmType": "div",
"style": {
"border-left": "10px solid",
"display": "flex",
"flex-direction": "row",
"width": "98%",
"height": "50px",
"margin-top": "10px",
"margin-bottom": "10px"
},
"attributes": {
"class": "ms-bgColor-themeLighter ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "span",
"txtContent": "@group.fieldData.displayValue",
"style": {
"padding-left": "25px",
"font-size": "20px",
"padding-right": "10px"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary ms-fontWeight-bold"
}
},
{
"elmType": "span",
"txtContent": "= '(' + @group.count + ')'",
"style": {
"font-size": "20px",
"padding-right": "10px"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary ms-fontWeight-bold"
}
}
]
}
},
"formatter": {
"elmType": "a",
"style": {
"diplay": "flex",
"flex-direction": "column",
"width": "230px",
"height": "180px",
"box-shadow": "0 3px 10px rgba(0,0,0,.2)",
"border": "1px solid",
"border-radius": "10px",
"cursor": "pointer",
"text-decoration": "none",
"margin": "10px"
},
"attributes": {
"class": "ms-fontColor-neutralTertiaryAlt ms-bgColor-white",
"href": "[$URL]",
"target": "_blank"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"height": "65%",
"width": "100%",
"border-radius": "10px 10px 0px 0px",
"justify-content": "center",
"align-items": "center"
},
"attributes": {
"class": "ms-bgColor-themeLighter"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if([$Image.serverRelativeUrl]=='','none','')",
"width": "100%",
"height": "100%",
"object-fit": "cover"
},
"attributes": {
"src": "=getThumbnailImage([$Image], 300, 300)"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"width": "85%",
"height": "35%",
"font-size": "15px",
"overflow": "hidden"
},
"txtContent": "[$Title]",
"attributes": {
"class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
}
}
]
}
}