Plotly嵌入图片导出HTML异常：本地/自定义URL图片问题求助

1. GitHub远程URL可正常显示的原因 #

GitHub提供的图片URL支持跨域访问，且Plotly导出HTML时会直接保留该远程链接。浏览器加载HTML时，能正常从GitHub的CDN获取资源，不存在跨域或资源访问限制问题。

2. 本地图片转base64后无法加载的原因 #

• Jupyter Notebook通过本地服务加载本地图片，因此能正常显示图表；
• 导出HTML时，Plotly会将本地图片编码为base64格式嵌入HTML，但如果出现以下情况会导致加载失败：
  • base64编码格式错误：比如MIME类型指定错误（如将image/png写成其他类型）、编码过程中字节遗漏或截断；
  • 浏览器解析限制：部分旧版本浏览器对大体积的base64嵌入资源支持不佳，无法正常解析渲染。

3. 自定义托管URL无法显示的原因 #

• 跨域资源共享（CORS）限制：自定义托管服务器未配置CORS响应头，当图片被嵌入到file://协议的本地HTML（或其他域名的HTML）中时，浏览器的安全策略会阻止跨域获取资源——即使直接在浏览器中访问URL能打开，嵌入时仍会被拦截；
• 协议或路径问题：如果自定义URL使用http协议，而本地打开HTML用的是file://协议，浏览器的混合内容策略会阻止加载非安全协议的资源；另外URL路径拼写错误（如大小写不匹配、缺失文件名后缀）也会导致资源无法找到；
• 服务器权限或缓存问题：服务器可能对资源设置了Referer限制，仅允许特定来源访问，Plotly HTML的请求Referer不符合要求时，资源会被拒绝返回；或者服务器缓存导致资源未正确更新。

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