如何在JSFiddle中添加外部SVG图片？无法显示该如何解决？

加载失败原因 #

• 混合内容拦截：JSFiddle运行在HTTPS环境下，你引用的SVG资源使用HTTP协议，现代浏览器默认会拦截HTTPS站点发起的HTTP非安全资源请求，直接阻止加载。
• 跨域策略限制：即便替换为HTTPS协议，若目标站点服务器未配置允许JSFiddle域名的跨域访问权限，资源仍会被浏览器同源策略拦截。

修复方案 #

1. 优先尝试替换资源协议为HTTPS，修改代码为：

<img src="https://www.sybase-recovery.com/images/icons/facebook-f.svg"/>

2. 若修改协议后仍无法加载，说明目标站点禁止外域引用资源，可选择以下方案规避：

• 下载该SVG文件后转换为base64编码，直接写入src属性，无需发起外部资源请求
• 将SVG文件上传至支持跨域访问的存储服务，使用对应HTTPS地址引入

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