How to Display Images from Supabase Storage

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  'https://your-project.supabase.co',
5  'your-anon-key'
6)
7
8// Get public URL (synchronous, no API call)
9const { data } = supabase.storage
10  .from('public-images')
11  .getPublicUrl('avatars/user-123.jpg')
12
13console.log(data.publicUrl)
14// https://your-project.supabase.co/storage/v1/object/public/public-images/avatars/user-123.jpg
15
16// Use in an img tag
17// <img src={data.publicUrl} alt="User avatar" />

1// Generate a signed URL that expires in 1 hour (3600 seconds)
2const { data, error } = await supabase.storage
3  .from('private-images')
4  .createSignedUrl('documents/invoice-42.pdf', 3600)
5
6if (error) {
7  console.error('Error creating signed URL:', error.message)
8} else {
9  console.log(data.signedUrl)
10  // Use in an img tag or download link
11}
12
13// Generate multiple signed URLs at once
14const { data: urls, error: batchError } = await supabase.storage
15  .from('private-images')
16  .createSignedUrls(
17    ['photos/img1.jpg', 'photos/img2.jpg', 'photos/img3.jpg'],
18    3600
19  )
20
21if (!batchError && urls) {
22  urls.forEach((item) => {
23    console.log(item.path, item.signedUrl)
24  })
25}

1// Public URL with transformation (thumbnail)
2const { data: thumbnail } = supabase.storage
3  .from('public-images')
4  .getPublicUrl('products/shoe.jpg', {
5    transform: {
6      width: 200,
7      height: 200,
8      resize: 'cover', // 'cover', 'contain', or 'fill'
9      quality: 80,
10      format: 'origin', // 'origin' keeps original format
11    },
12  })
13
14// Signed URL with transformation
15const { data: signedThumb } = await supabase.storage
16  .from('private-images')
17  .createSignedUrl('photos/portrait.jpg', 3600, {
18    transform: {
19      width: 150,
20      height: 150,
21      resize: 'cover',
22    },
23  })
24
25// Responsive image set
26const sizes = [100, 300, 600, 1200]
27const srcSet = sizes.map((w) => {
28  const { data } = supabase.storage
29    .from('public-images')
30    .getPublicUrl('hero/banner.jpg', {
31      transform: { width: w },
32    })
33  return `${data.publicUrl} ${w}w`
34}).join(', ')

1import { useState, useEffect } from 'react'
2import { supabase } from '@/lib/supabase'
3
4interface StorageImageProps {
5  bucket: string
6  path: string
7  alt: string
8  width?: number
9  height?: number
10  isPublic?: boolean
11}
12
13export function StorageImage({ bucket, path, alt, width, height, isPublic = true }: StorageImageProps) {
14  const [url, setUrl] = useState<string | null>(null)
15  const [error, setError] = useState(false)
16
17  useEffect(() => {
18    if (isPublic) {
19      const { data } = supabase.storage.from(bucket).getPublicUrl(path, {
20        transform: width ? { width, height: height || width } : undefined,
21      })
22      setUrl(data.publicUrl)
23    } else {
24      supabase.storage.from(bucket).createSignedUrl(path, 3600, {
25        transform: width ? { width, height: height || width } : undefined,
26      }).then(({ data, error: err }) => {
27        if (err) setError(true)
28        else setUrl(data.signedUrl)
29      })
30    }
31  }, [bucket, path, width, height, isPublic])
32
33  if (error) return <div>Failed to load image</div>
34  if (!url) return <div>Loading...</div>
35
36  return (
37    <img
38      src={url}
39      alt={alt}
40      onError={() => setError(true)}
41      loading="lazy"
42    />
43  )
44}

1-- Allow authenticated users to view their own files
2create policy "Users can view own files"
3on storage.objects for select
4to authenticated
5using (
6  bucket_id = 'private-images'
7  and auth.uid()::text = (storage.foldername(name))[1]
8);
9
10-- Allow authenticated users to upload to their own folder
11create policy "Users can upload own files"
12on storage.objects for insert
13to authenticated
14with check (
15  bucket_id = 'private-images'
16  and auth.uid()::text = (storage.foldername(name))[1]
17);
18
19-- Allow anyone to view files in a public bucket
20create policy "Public read access"
21on storage.objects for select
22to anon, authenticated
23using ( bucket_id = 'public-images' );