SupaBase Public URL - How to show all users avatar?

Question

Framework: Next.js with SupaBase

Im trying to get all users avatar that are stored in a column in a table -> "Profiles"

I only get the image name "placeholder.png", how do I get the public URL, and map over it for each user?

This is my code

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,
        },
    };
}

Result:

Answer 1

The bucket in SupaBase wasn't public!

You can check this by looking at you Bucket as seen here.

(Make it public, by hovering the bucket and clicket the 3 dots.!)