Download Image from SharePoint Image column using JSON formatting

In my previous blog about image columns in SharePoint, I explained all you need to know about New Image column type in SharePoint online including how to create an image column, how to add image to a list item, where the Images will be stored, etc.

You can add one image per SharePoint list item using SharePoint image column and the images are stored in Site Assets library by default. Using SharePoint online out of the box capabilities, there is no way to download the images from SharePoint list image column. In this blog, I will demonstrate how to create add a button within a SharePoint Online/Microsoft Lists modern experience view which downloads the image from SharePoint image column.

You can use below JSON to add a button in SharePoint online list column to download the image from image column in same list. This JSON formatting can be applied to any existing column in your SharePoint online list OR if you want to create a new column and then apply JSON formatting, follow the steps given in this blog: Working with SharePoint Online/Microsoft List Comments using JSON Formatting

{
	"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
	"elmType": "button",
	"style": {
		"border-radius": "5px",
		"margin": "5px 0px",
		"padding": "0px",
		"border": "none",
		"display": "=if([$Image.serverRelativeUrl]=='','none','')"
	},
	"attributes": {
		"class": "ms-bgColor-themePrimary"
	},
	"children": [
		{
			"elmType": "a",
			"style": {
				"text-decoration": "none",
				"padding": "12px 0px",
				"width": "100%"
			},
			"attributes": {
				"href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+if([$Image.serverRelativeUrl],[$Image.serverRelativeUrl],@currentWeb+'/Lists/**YOUR-LIST-NAME**/Attachments/'+[$ID]+'/'+[$Image.fileName])",
				"target": "_blank",
				"class": "ms-fontColor-white ms-fontSize-m"
			},
			"children": [
				{
					"elmType": "span",
					"style": {
						"display": "inline-block",
						"padding": "0 4px"
					},
					"attributes": {
						"iconName": "Download"
					}
				},
				{
					"elmType": "span",
					"txtContent": "Download"
				}
			]
		}
	]
}

Where [$Image] is the internal name of your SharePoint image column. Also, make sure to edit the above JSON and replace the **YOUR-LIST-NAME** placeholder with your list’s name, as it appears in the list URL (including special characters).

This SharePoint JSON formatting code adds a button within a SharePoint Online/Microsoft Lists modern experience view which downloads the image from SharePoint image column:

Download Image from SharePoint Online Modern experience Image column using JSON formatting — *Download Image from SharePoint Image column using JSON formatting*

Above JSON is also available on GitHub in PnP List Formatting Repository at: Download Image from SharePoint Image column.

Vue normale

Learn More