List view formatting referencing url from external domains e.g. twitter or instagram

Question

I am trying a list view formatting to display image URL saved in a column "mediaUrl" as an image.

I am using this JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "relative",
      "text-align": "left",
      "display": "block",
      "font-family": "Segoe UI",
      "background-color": "#F3F2F1",
      "padding": "10px 10px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "box-shadow": "0 3px 6px 0 #00000029"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "justify-content": "center",
              "overflow": "hidden",
              "background-color": "#e1dfdd"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "=if([$media_type] == 'IMAGE', 'block', 'none')"
                },
                "children": [
                  {
                    "elmType": "img",
                    "style": {
                      "height": "auto",
                      "max-width": "100%",
                      "flex-shrink": "0"
                    },
                    "attributes": {
                      "src": "[$mediaUrl]"
                    }
                  }
                ]
              }
            ]
          }
        ]  
      }
    ]
  }
}



However any images from external domains, e.g. `https://twitter.com/reshmeeauckloo/photo` won't load except if the URL references an image within the SharePoint site. I have not seen any restrictions around it. Any pointers or help would be appreciated.

I was expecting `src` set to  `https://twitter.com/reshmeeauckloo/photo` for the `img` tag would load/render.

score 0 · Answer 1 · answered Aug 09 '23 at 14:23

First of all, you will have to use the public URLs in your JSON so that all the users will have access to see the images.

Also, with the recent updates to SharePoint JSON formatting, external images referred in SharePoint JSON formatting might not work.

You can fix this issue by adding external site domain from which you are using images in HTML Field Security settings - Allow or restrict the ability to embed content on SharePoint pages

Reference: How to automatically load URL image link without using edit grid view

List view formatting referencing url from external domains e.g. twitter or instagram

1 Answers1