SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Reference a Local Image

This sample provides multiple formats to illustrate the options available to reference local image files. The primary purpose is to demonstrate the usage of `@currentWeb` (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view.

Get this format View on GitHub

Shared by Chris Kent
Updated Jan 10, 2018

Reference a Local Image formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

5 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "='https://thechriskent.sharepoint.com/sites/WarriorHorses/Shared Documents/Evilness/' + @currentField + '.png'"
  },
  "style": {
    "width": "64px",
    "height": "64px"
  }
}
View sourceLink to this definitiontext-hardcoded-image.json

From the contributor

How to use this sample

Summary

This sample provides multiple formats to illustrate the options available to reference local image files. The primary purpose is to demonstrate the usage of @currentWeb (O365 only) to prevent issues with reusable formats or formats rendered outside of the main list view.

screenshot of the sample

Formats

text-local-image

This format is the one you should use if you are using Office 365. The image's src attribute is built using the @currentWeb token. This ensures that your format is reusable between sites and can be used within your site regardless of level (folder).

text-hardcoded-image

This format illustrates providing a full URL (including the tenant and site). This is NOT recommended because while the image will always work regardless of level, the format will have to be manually updated to be reused. For example, to use this format in your own environment you will first have to update the tenant URL.

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported (SP2019).

text-relative-image

This format illustrates providing a relative link that assumes the format knows the position of the resources relative to where the format is rendered. This is NOT recommended because while the format is reusable across sites without manual updates required, the format is very fragile because it can easily break across your site depending on the relative location the format is rendered. For instance, a page using a list web part will be at a different level (relative foldering) than the list view itself.

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported (SP2019).

View requirements

  • This format can be applied to a Text or Choice column

Sample

Solution Author(s)
text-local-image.json Chris Kent
text-hardcoded-image.json Chris Kent
text-relative-image.json Chris Kent

Version history

Version Date Comments
1.0 January 10, 2018 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

The image's src attribute uses the @currentWeb token to ensure that regardless of where the format is rendered, the images will be pulled from the correct folder in the Documents library for the site. However, @currentWeb is not available in SharePoint 2019, so alternative approaches are included.