How to display images from Supabase storage?

 

Step 1: Set Up Supabase Project

 

Start by creating a new project in Supabase. Go to supabase.com, sign up, and create a new project. Once the project is set up, navigate to the Dashboard.

 

Step 2: Initialize Supabase in Your Project

 

To interact with Supabase's services, you need to install the Supabase client in your application and initialize it.

npm install @supabase/supabase-js

Import and initialize Supabase client using your project’s URL and API key (find these in your Supabase dashboard under project settings):

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';
const supabase = createClient(supabaseUrl, supabaseKey);

 

Step 3: Configure Storage

 

Create a new bucket in the Storage section of the Supabase dashboard. Name this bucket (e.g., "images") and adjust any permissions as necessary. Make sure to allow public access if you want images to be viewable by anyone without authentication.

 

Step 4: Upload Images to Supabase Storage

 

You can upload images using the Supabase dashboard directly or through the client.

Here’s how you can upload an image using JavaScript:

async function uploadImage(file) {
  const { data, error } = await supabase
    .storage
    .from('images')  // your bucket name
    .upload(`public/${file.name}`, file);

  if (error) {
    console.log('Error uploading image:', error.message);
  } else {
    console.log('Image uploaded successfully:', data.Key);
  }
}

Make sure you have a file input element in your HTML to select images:

<input type="file" id="fileInput">

And use this function to upload:

document.getElementById('fileInput').addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file) {
    uploadImage(file);
  }
});

 

Step 5: Fetch Image URLs from Supabase Storage

 

To display the images, you'll need to fetch their URLs. Use the getPublicUrl function provided by the Supabase client:

async function fetchImages() {
  const { data, error } = await supabase
    .storage
    .from('images')
    .list('public');

  if (error) {
    console.error('Error fetching images:', error.message);
  } else {
    const imageUrls = data.map(file => {
      const { publicURL } = supabase
        .storage
        .from('images')
        .getPublicUrl(`public/${file.name}`);
        
      return publicURL;
    });

    displayImages(imageUrls);
  }
}

 

Step 6: Display Images on Your Web Page

 

Create a function to render these images:

function displayImages(urls) {
  const imageContainer = document.getElementById('imageContainer');

  urls.forEach(url => {
    const img = document.createElement('img');
    img.src = url;
    img.alt = 'Supabase Image';
    img.style.width = '200px';
    img.style.height = 'auto';
    imageContainer.appendChild(img);
  });
}

Make sure you have a div where images will be appended:

<div id="imageContainer"></div>

Finally, call fetchImages() to display images on page load or any expected event:

fetchImages();

 

Step 7: Test and Debug

 

Ensure all credentials, project settings, and endpoints are correctly configured. Verify image URLs to check for permissions and path accuracy. Debug any issues with browser developer tools.

 

This completes displaying images from Supabase storage on your web page. Adjust styles and functionality according to your requirements.