从Supabase Storage加载图片返回403的问题求助

数据老陈

2026-7-9

解决Supabase + Next.js自定义图片加载器403错误的方法

1. 验证存储策略配置

确保你创建的策略满足以下要求：

针对storage.objects表的SELECT权限，目标角色设置为anon

测试策略条件是否匹配你的图片：

SELECT bucket_id, name, storage.extension(name), storage.foldername(name)[1], auth.role() 
FROM storage.objects 
WHERE bucket_id='static-assets' LIMIT 1;

确认结果中：扩展名是jpg/png、foldername(name)[1]为public、auth.role()返回anon

2. 修正自定义加载器的URL构造

当前加载器的路径格式有误，render/image端点不需要public前缀，正确格式应为/storage/v1/render/image/{bucket-name}/{object-path}。修改代码如下（假设src是桶内路径，如public/xxx.jpg）：

export default function supabaseLoader({
    src,
    width,
    quality,
}: SupabaseLoaderProps) {
    const url = new URL(
        `${process.env.NEXT_PUBLIC_SUPABASE_URL!}/storage/v1/render/image/static-assets/${src}`
    );
    url.searchParams.set('width', width.toString());
    url.searchParams.set('quality', (quality || 75).toString());
    return url.href;
}

3. 排查基础访问问题

直接访问原始图片URL（无需转码）：https://<你的Supabase URL>/storage/v1/object/static-assets/public/xxx.jpg
- 如果返回403：说明存储策略仍存在配置问题，重新检查策略的权限类型、角色匹配和条件逻辑
- 如果能正常访问：说明转码端点的路径构造错误，按步骤2修正即可