使用 Supabase 将访问控制的静态文档集成到 SolidJS 应用程序中

Question

我正在尝试创建一个以 Supabase 作为后端、SolidJS 作为前端的网站。该网站的用户使用 Supabase 登录、进行身份验证，并可以根据其权限访问某些文档，这些权限也存储在 Supabase 数据库中。我的静态文档是使用 Sphinx 生成的，我为此使用了“json”输出选项，这为我提供了一个包含文档页面（在 json 文件中）和一些其他静态组件（例如图像文件）的文件夹结构。我已将这些文件夹和文件上传到 Supabase 存储。

我从 json 中获取的静态 html 片段已成功集成到我的 SolidJS 网站中，引用图像文件将它们加载到页面中。我尝试使用 SolidJS Router 添加图像路径并返回这些路径的图像。

当我尝试渲染 URL 以“.png”结尾的页面时，就会出现问题。我不断收到非常有帮助错误：

'无法显示图像“somepage.png”，因为它包含错误。'

如果我去掉 URL 的 .png 结尾（并在我的 SolidJS 代码中对此进行补偿），页面工作正常并且只显示图像，因此从 Supabase 获取图像似乎不是问题。我猜问题是浏览器需要一个 png 图像，但却收到一个包裹该图像的 html 文件。这是当路由器检测到路由到图像路径时我的 SolidJS 函数返回的结果：

return ( <img src={image()} alt="Image" /> );

其中 Signal getter

image()

的值设置为：

let { data, error, status } = await supabase
    .storage
    .from('docs')
    .download(file_path)

if (error && status !== 406) {
    throw error
}

if (data) {
    setImage(URL.createObjectURL(data))
}

我不确定如何最好地解决这个问题。如果有一种简单的方法来正确渲染 png 页面，那将会很有用。否则，我可以尝试对 json 文件中的 html 片段进行一些字符串替换，但我不确定这是否会破坏其他一些功能。我对网络开发很陌生，所以也许我完全错误地处理了文档集成。任何帮助完成这项工作将不胜感激！

作为参考，我一直在尝试大致遵循这个想法：使用 React 渲染 Sphinx 文档

Answer 1

与其将图像下载到本地，不如直接获取图像 URL。如果您的存储桶是公共的，您可以执行以下操作：

const { data } = supabase
  .storage
  .from('docs')
  .getPublicUrl(file_path)

setImage(data.publicUrl)