SharePoint列表视图格式化无法加载外部域名图片求助

问题背景 #

使用以下JSON格式化SharePoint列表视图，将mediaUrl列的URL渲染为图片时，仅能加载站点内图片，外部域名（如Twitter）的图片无法正常显示：

{"$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]"}}]}]}]}]}}

解决思路 #

1. 确认外部URL是否为直接图片资源 #

注意https://twitter.com/reshmeeauckloo/photo是Twitter的照片页面链接，并非直接的图片文件URL（通常带.jpg/.png等后缀）。需要确保mediaUrl列存储的是图片资源的直接地址，而非网页链接。例如Twitter的图片直接URL格式一般为https://pbs.twimg.com/media/[唯一标识].jpg。

2. 绕开CORS跨域限制 #

多数外部站点（如Twitter）的图片资源启用了CORS限制，浏览器会阻止SharePoint页面直接加载跨域资源。可以通过SharePoint内置的图片代理服务中转请求：
将img标签的src属性修改为以下格式，利用getpreview.ashx代理外部图片：

"src": "=@currentWeb + '/_layouts/15/getpreview.ashx?url=' + encodeURIComponent([$mediaUrl])"

修改后的完整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": "=@currentWeb + '/_layouts/15/getpreview.ashx?url=' + encodeURIComponent([$mediaUrl])"}}]}]}]}]}}

3. 检查SharePoint站点的外部内容嵌入设置 #

确认SharePoint管理中心的外部域嵌入设置，是否允许目标域名（如twitter.com）的内容嵌入。如果站点配置了仅允许特定域，需要将目标域名添加到允许列表中。

4. 测试图片URL的可访问性 #

直接在浏览器中打开外部图片URL，确认图片能正常加载。如果无法打开，可能是URL失效或目标站点限制了外部访问。

内容的提问来源于stack exchange，提问作者Reshmee Auckloo