はじめに
アプリ作成でSupabase Storageから取得した画像表示されない問題がありました。
問題
Supabase Storageの記事を参考にしています。
HomeContent
const HomeImageData = supabase.storage.from("images").getPublicUrl("desksetappimage/Homeimage/desksetapp_home_image.png");
・・・
<img src={HomeImageData.data.publicUrl} alt="deskset" width={600} height={400} className="mx-auto mt-10 rounded-lg shadow-md" />
解決方法
Supabase StrorageのPolicy設定に不備がありました。
((bucket_id = 'images'::text) AND (storage.extension(name) = 'jpg'::text) AND (lower((storage.foldername(name))[1]) = 'public'::text) AND (auth.role() = 'anon'::text))
参照したい画像は～.pngだったのに許可はjpgのみでした。（デフォルトの設定から変更していなかったです。）
また、(lower((storage.foldername(name))[1]) = 'public'::text)となっており、public配下のフォルダしか条件を満たせないようになっていました。
今回はSelectの場合だけなので、Policy設定は以下のように修正しました。
(bucket_id = 'images')
AND (auth.role() = 'anon')
画像は表示されるようになりました。
おわりに
つぎにいきます。