Display Images Instead of URLs in SharePoint Online List Columns
Question details
The user wants SharePoint Online list columns to display pictures rather than image URLs or HTML text.
- Product
- Microsoft SharePoint Online
- Device & OS
- not provided
- Scenario
- A calculated column generates HTML containing image URLs, using an approach that worked in SharePoint 2013.
- Observed behavior
- SharePoint Online displays the calculated value as text or a URL instead of rendering the image.
Confirm that each image URL opens the image directly and that list users have permission to view it. Check whether you can create list columns or edit column formatting; these solutions require the appropriate list permissions.
Render image URLs with JSON column formatting
Use this method in a modern SharePoint Online list to display images without relying on calculated-column HTML.
JSON column formatting changes how a value appears without changing the stored data. It can also display different images conditionally based on other column values.
Open the list, select Add column > Single line of text, and name the column ImageURL. Enter a direct HTTPS image URL for each item instead of an HTML <img> tag.
Select the ImageURL column header, then Column settings > Format this column. Open Advanced mode in the formatting pane.
Paste this JSON into the editor: {"$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json","elmType":"img","attributes":{"src":"@currentField","alt":"List item image"},"style":{"width":"80px","height":"80px","object-fit":"contain"}}. Select Preview, then Save.
Return to the list view and verify that the images load. If an image is missing, open its stored URL in your browser and check access permissions and whether the URL points directly to an image.
Use a Hyperlink or Picture column configured for pictures
Use this option when each item needs one image URL and you prefer built-in column settings over JSON.
Insert images into an enhanced rich-text column
Use this option when an item needs images alongside formatted text rather than a single image-only cell.
Work with SharePoint List Exports in WPS Spreadsheet
WPS Office is a free, lightweight alternative for working with exported list data and related Office documents. Its familiar interface and Microsoft Office format compatibility make migration straightforward, but it does not fix SharePoint column rendering or apply SharePoint JSON formatting.
Frequently Asked Questions
Why did calculated-column image HTML work in SharePoint 2013 but not SharePoint Online?
Some older SharePoint configurations rendered calculated-column HTML. SharePoint Online does not support relying on that behavior. Use Column settings > Format this column in a modern list, or create a Hyperlink or Picture column instead.
Can I display different pictures based on a status value?
Yes. Open the target column's menu and select Column settings > Format this column > Advanced mode. Use a conditional expression in the JSON src attribute to select an image URL based on a field such as [$Status]. Use the field's internal name and include it in the current view.
Why is my image blank after I apply JSON formatting?
Open the image URL directly in your browser. Confirm that it points to an image rather than a sharing or preview page and that the intended users have access. Also check that the column contains a URL, not an HTML tag, when your formatting uses @currentField as the image source.
Does column formatting replace the stored URL with an image?
No. JSON formatting only changes the list's visual presentation. The URL remains the stored value, so an export may contain the URL rather than an embedded picture.
Can WPS Office fix the image display in my SharePoint list?
No. Configure the display within SharePoint using column formatting or a supported column type. WPS Spreadsheet can help review exported list data, but it cannot change SharePoint's rendering behavior.
