如何在Slate代码沙箱中添加图片？Foundry图片引用异常

我在Foundry的HTML组件中可以正常运行以下代码显示图片，但将其放到代码沙箱中就失效了：

<img src="https://<stack-name>.com/blobster/api/salt/<resource-id>" 
    alt="" width="200" height="200">

问题截图：

可能的原因 #

• 跨域限制：代码沙箱环境普遍有严格的CORS策略，Foundry的Blobster API大概率没有允许代码沙箱域名的跨域请求，导致图片加载失败。
• 权限验证缺失：Foundry内部资源访问通常需要身份验证信息（如Cookie、Token），代码沙箱环境没有这些凭据，无法通过Foundry的权限校验。
• 占位符未替换：检查是否已将代码中的<stack-name>和<resource-id>替换为实际的有效值，代码沙箱不会自动解析这些占位符。
• 沙箱网络限制：部分代码沙箱会限制对非公开或需认证外部资源的请求，导致无法访问Foundry的Blobster接口。

解决建议 #

1. 若有Foundry管理员权限，可配置Blobster API的CORS策略，允许代码沙箱的域名发起跨域请求。
2. 在代码沙箱中添加身份验证头，携带Foundry的访问Token（注意保护Token安全，避免泄露）。
3. 将Foundry中的图片下载到本地，直接在代码沙箱中引用本地图片资源。
4. 尝试使用Foundry提供的公开访问链接（如果有）替代当前的内部API链接。

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