1

I have a SharePoint List with a picture column and an image stored in there. The path to the full image is:

https://my-sharepoint.sharepoint.com/sites/Sitename/SiteAssets/Lists/1dd174b6-XXXX-XXXX-XXXX-621c1c8015ec/Arztpraxis-Empfang[1].jpg

After using the browser debug mode I found a ultra long and cryptic URL to the thumbnail image, which is not related to my SharePoint in any way. Seems like it's pointing to a BLOB.

Is there a way to reference to the thumbnail directly instead of displaying the full resolution image within the list?

My code so far:

{
  "elmType": "img",
  "style": {
    "display": "flex",
    "self-align": "center",
    "height": "100%",
    "z-index": "0"
  },
  "attributes": {
    "src": "[$PraxisFoto.serverRelativeUrl])"
  }
}
1
  • What is the data type of column, Image or Hyperlink/Picture? Commented Nov 30, 2021 at 13:37

1 Answer 1

1

This appears to be an Image column from your use of properties in the format above. In this case, you can take advantage of the thumbnailRenderer included in Image columns:

{
  "elmType": "img",
  "attributes": {
    "src": "[email protected] + '/thumbnails/0/c48x48/content?prefer=noredirect&cb=1&s=' + @currentField.thumbnailRenderer.sponsorToken"
  }
}

There are a number of samples that might be helpful to look at as well:

  • Image Lightbox - for image columns showing the above technique though I've removed the closestavailablesize portion of the querystring in the json above to ensure you actually get a scaled thumbnail
  • Generic Hyperlink Thumbnail - for use with Picture columns (though you can use the same technique with a URL to an image)
  • File Thumbnail - Uses formattings @thumbnail magic string in document libraries
1
  • 1
    That did the trick. Thank you!
    – Der_Fab
    Commented Dec 2, 2021 at 5:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.