HTML图片无法在DOM中渲染，直接访问对应链接可正常加载

• 核心原因：CDN防盗链（Referer校验）限制
  Instagram、Facebook所属的CDN服务对静态资源配置了防盗链规则，会校验HTTP请求头的Referer字段：

直接将链接粘贴到浏览器地址栏访问时，请求的Referer字段为空，符合CDN放行规则，图片可以正常加载。
将img标签嵌入到第三方网页时，浏览器发起图片请求会自动携带当前网页的域名作为Referer，CDN识别到非自有/白名单域名的请求，会直接拒绝返回资源，导致图片渲染失败。

• 次要排查点：HTML实体转义异常
  如果你是通过字符串拼接的方式直接将转义后的&写入src属性，没有经过HTML解析器的自动转义还原，会导致src链接格式错误，请求无效。正常在HTML文件中编写的&会被浏览器自动解析为&，该问题出现概率较低。

• 方案1：添加referrerpolicy属性（临时使用首选）
  给img标签设置referrerpolicy="no-referrer"，要求浏览器请求图片时不携带Referer头，直接绕过CDN的防盗链校验，示例代码如下：

<img src="https://instagram.fdel11-1.fna.fbcdn.net/v/t51.2885-15/e35/243484433_4623930577670580_8811494291771584746_n.webp.jpg?_nc_ht=instagram.fdel11-1.fna.fbcdn.net&_nc_cat=1&_nc_ohc=BYbqNgqFSrwAX_9HBGd&edm=AABBvjUBAAAA&ccb=7-4&oh=97074dca2b7dc5890537b241b3e48e4e&oe=615E7208&_nc_sid=83d603" loading="lazy" referrerpolicy="no-referrer">

• 方案2：服务端代理中转
  如果防盗链规则调整导致方案1失效，可以在自己的服务端搭建代理接口：前端先请求自有服务端的接口，由服务端发起请求拉取Instagram的图片资源，再返回给前端。服务端请求不会携带前端页面的Referer，可稳定绕过防盗链限制，同时可以处理链接过期问题。
• 方案3：本地化存储（长期使用首选）
  如果需要长期使用该图片，建议将图片下载到本地或者自有OSS存储中，使用自有域名的资源链接，完全规避第三方平台的防盗链、链接过期等不稳定问题。

注意：Instagram的CDN资源链接默认携带过期参数，临时展示可选择方案1，长期使用优先选择方案2或3。

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