reactjs - SupaBase 公共 URL - 如何显示所有用户头像？

Question

框架：带有 SupaBase 的 Next.js

我试图获取存储在表中的列中的所有用户头像->“配置文件”

我只获得图像名称“placeholder.png”，如何获得公共 URL，并为每个用户映射它？

这是我的代码

function Brugere({ profiler, url }) {
    return (
        <div className="flex -space-x-2 overflow-hidden">
          {console.log(profiler)}
          {profiler.map((e, index) => (
            <div className="person" key={index}>
              <p>{e.username}</p>
    
              <img
                className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
                src={e.avatar_url}
                alt=""
              />
            </div>
          ))}
        </div>
    );
}
    
export default Brugere;
    
export async function getServerSideProps() {
    const { data: profiler, error } = await supabase.from("profiles").select("*");
    
      {
        error ? console.log(error) : console.log(profiler);
      }
    
      return {
        props: {
          profiler,
        },
    };
}

结果：

Answer 1

SupaBase 中的存储桶不是公开的！

您可以通过查看您的 Bucket 来检查这一点，如此处所示。

（通过悬停存储桶并点击 3 个点，将其公开。！）