【React】Supabaseテーブルに保存した画像を公開URLに変換する方法について

はじめに

Supabaseのテーブルに保存した画像を表示する際に公開URLに変換する方法でつまずいたため記事にします。
前提条件として当初テーブルに画像を公開URLのまま保存していましたが、テーブルにproject-idが表示されてしまうことから、公開URLではなくファイル名でテーブルへ保存する方法に変えようとしております。

解決方法

mapで画像URLだけ取出しsupabaseの公開URL形式に変換する

.tsx

export const supabaseUrl = process.env.VITE_SUPABASE_URL

.tsx

const SUPABASE_STORAGE_URL = `${supabaseUrl}/storage/v1/object/public/post-images`;


const {data, error} = await supabase
          .from('posts').select('id, title, content, image_url, movie_url').order('created_at', { ascending: false });
        if (error) throw error;

        const postsWithUrls = data.map((post) => ({
          ...post,
          image_url: `${SUPABASE_STORAGE_URL}/${post.image_url}`
        }));

おわりに

これでうまく取得できるようになりました。