如何在基于Supabase的SolidJS应用中集成带权限的静态文档

你的问题核心是路由匹配逻辑导致浏览器请求图片时收到的是HTML页面而非图片资源：当访问.png结尾的URL时，SolidJS路由返回了包含<img>标签的HTML，但浏览器期望直接接收PNG二进制数据，因此解析失败；去掉后缀后，路由返回的是正确处理后的Blob URL，图片就能正常显示。

下面给出几个实用的修复方案：

方案一：调整路由，让图片路径直接返回资源（推荐） #

1. 用Supabase签名URL替代前端中转 #

不需要在SolidJS里下载图片再转Blob URL，直接通过Supabase生成带权限的签名URL，让浏览器直接请求存储服务，同时保证只有授权用户能访问：

// 替换原有的下载逻辑，生成有效期1小时的签名URL
const { data: { signedUrl }, error } = await supabase
  .storage
  .from('docs')
  .createSignedUrl(file_path, 3600);

if (error) throw error;
setImage(signedUrl);

然后在图片路由组件中，直接重定向到这个签名URL：

// SolidJS图片路由组件
export function ImageRoute() {
  const [imageUrl, setImageUrl] = createSignal('');
  const params = useParams();
  const file_path = params.filePath;

  createEffect(async () => {
    const { data: { signedUrl }, error } = await supabase
      .storage
      .from('docs')
      .createSignedUrl(file_path, 3600);
    
    if (error) throw error;
    setImageUrl(signedUrl);
  });

  return <Navigate to={imageUrl()} />;
}

这样浏览器请求.png路径时，会直接跳转到Supabase的签名URL，获取到正确的图片资源。

2. 前端中转时直接返回Blob资源 #

如果必须通过前端中转，调整路由组件逻辑，不返回HTML，直接让浏览器加载Blob：

export function ImageRoute() {
  const params = useParams();
  const file_path = params.filePath;

  createEffect(async () => {
    const { data, error, status } = await supabase
      .storage
      .from('docs')
      .download(file_path);

    if (error && status !== 406) throw error;
    if (data) {
      const url = URL.createObjectURL(data);
      // 直接让浏览器导航到Blob URL，显示图片
      window.location.href = url;
    }
  });

  return null; // 无需渲染HTML
}

同时记得把图片路由的优先级设为最高，避免被其他文档路由拦截。

方案二：修改Sphinx生成的HTML路径 #

批量替换JSON中HTML片段的图片路径，去掉.png后缀，让请求路径匹配你当前能正常处理的路由：
可以用Node.js脚本处理生成的JSON文件：

const fs = require('fs');
const jsonContent = fs.readFileSync('./docs.json', 'utf8');
// 替换所有<img>标签中的.png后缀
const modifiedContent = jsonContent.replace(/src="([^"]+)\.png"/g, 'src="$1"');
fs.writeFileSync('./modified-docs.json', modifiedContent);

处理后，HTML中的图片路径不带.png后缀，就能匹配你现有的路由逻辑正常显示。

方案三：优化整体集成思路 #

如果你的文档是静态资源，推荐直接通过Supabase存储的URL提供访问，不需要SolidJS路由中转：

1. 在Supabase存储桶中设置权限（比如仅认证用户可访问）
2. 生成文档时，让Sphinx直接使用Supabase存储的URL作为图片路径
3. 在SolidJS中直接渲染HTML片段，图片会自动请求Supabase的存储URL，无需额外路由处理

这种方式既减少前端逻辑复杂度，又能利用Supabase的权限控制保证文档安全。

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