Utilizing Next.js framework with SupaBase
I am attempting to retrieve all user avatars stored in a column within the "Profiles" table.
https://i.stack.imgur.com/wGgrO.png
Currently, I am only receiving the image name "placeholder.png". How can I extract the public URL and iterate over it for each user?
Below is my code snippet:
function Users({ profiles, url }) {
return (
<div className="flex -space-x-2 overflow-hidden">
{console.log(profiles)}
{profiles.map((profile, index) => (
<div className="person" key={index}>
<p>{profile.username}</p>
<img
className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
src={profile.avatar_url}
alt=""
/>
</div>
))}
</div>
);
}
export default Users;
export async function getServerSideProps() {
const { data: profiles, error } = await supabase.from("profiles").select("*");
{
error ? console.log(error) : console.log(profiles);
}
return {
props: {
profiles,
},
};
}
Result: