SharePoint Document Issues

How to Fix SharePoint JSON Column Formatting Not Displaying Image Thumbnails

Natalie Taylor Oct 9, 2026 869 views

Question details

The user needs to fix an issue where SharePoint list column formatting is no longer rendering thumbnails for newly uploaded images.

How to Fix SharePoint JSON Column Formatting Not Displaying Image Thumbnails

Product: SharePoint
Device & OS: not provided
Scenario: Customizing a SharePoint list view using JSON column formatting to display image thumbnails.
Observed behavior: Newly added images fail to display thumbnails when the JSON code uses the Image column's server-relative URL (@currentField.serverRelativeUrl).

Before you start

Ensure you have the necessary site permissions to edit column formatting in your SharePoint list, and verify that the uploaded images are fully synced to the document library.

Solution 1Recommended

Update JSON Code to Use the getThumbnailImage Function

Replace the server-relative URL call with SharePoint's native getThumbnailImage function to reliably render newly added images.

SharePoint's dynamic field variables can sometimes fail to parse new image column formats properly. Using the dedicated thumbnail function ensures the list fetches the correct rendered image asset.

Open Column Formatting

Navigate to your SharePoint list, click the column header for your Image column, select 'Column settings', and then click 'Format this column'.

Replace the Image Source Variable

In the JSON editor, locate the 'src' attribute. Replace '@currentField.serverRelativeUrl' with the thumbnail function. For example, use 'getThumbnailImage(@currentField, 200, 200)'.

Adjust Thumbnail Dimensions

To prevent layout issues, set explicit styling in your JSON. Add a width property (e.g., 100 or 200 pixels) and adjust positioning and margins as needed.

Save and Preview

Click 'Save' at the bottom of the formatting pane and refresh the page to verify that the image thumbnails now display correctly.

Update JSON Code to Use the getThumbnailImage Function

Thumbnail Quality: Be careful when defining dimensions in the getThumbnailImage function. Enlarging the downloaded thumbnails beyond their native resolution (e.g., above 200 pixels) may cause them to appear blurry.

Solution 2

Use Direct Image Paths as a Fallback

If dynamic variables continue to fail, mapping the source directly to the image path can bypass SharePoint's internal variable issues.

Free Microsoft Office alternative

Looking for a Seamless Office Suite to Manage Your Documents?

While troubleshooting SharePoint list views, ensure your local document management remains efficient and hassle-free. WPS Office is a lightweight, fully compatible alternative to Microsoft Office for editing Word, Excel, and PowerPoint files natively.

1. Download the Installer: Visit the official WPS Office website and click the free download button for your operating system.
2. Install WPS Office: Run the downloaded installer and follow the on-screen instructions to set up the suite on your device.
3. Open Your Office Documents: Launch WPS Office and open your existing Word, Excel, or PowerPoint files without worrying about formatting loss.

Completely free and lightweight office suiteHigh compatibility with Microsoft Word, Excel, and PowerPoint formats (.docx, .xlsx, .pptx)Familiar, easy-to-navigate user interfaceSeamless migration from other enterprise office software

microsoft office alternative - wps office

Frequently Asked Questions

Why does @currentField.serverRelativeUrl stop working for new images?

SharePoint frequently updates its column architecture. The newer 'Image' column type handles backend storage and relative URLs differently than standard hyperlink or attachment columns, which often breaks older JSON formatting.

How can I prevent SharePoint image thumbnails from appearing blurry?

Blurriness occurs when a small thumbnail is stretched beyond its generated size. Keep the dimensions in your getThumbnailImage function and CSS width property (e.g., 100 or 200 pixels) proportional to avoid upscaling artifacts.

Can I use CSS to fix the alignment of my JSON formatted thumbnails?

Yes. You can add a 'style' object within your JSON schema to include inline CSS properties such as margins, padding, and text-align, which will help properly position the thumbnail within the list view.

Document & File Issues