Attaching Images/Videos in your project

Overview

This article explains how to use images/videos in Dualite and how to reference them correctly and reliably when working with visuals in your project.

There are two supported ways to do this:

1. Adding images directly to your Dualite project

2. Hosting images/vidoes externally using Supabase and referencing them via public URLs

You can choose the method that best fits your use case. For small projects or quick iterations, adding images directly to the project is usually sufficient. For larger or more dynamic setups, external hosting is recommended.

Method 1: Add Images Directly to Your Dualite Project

Dualite allows you to upload images directly to your project and reuse them across your project.

This is the simplest way to work with images in Dualite.

Step 1: Add Images to the Project

Write the message or open an existing Dualite project. Click on the + button and click on Add Images to Project. Upload images from your computer.

You can add up to 10 images per project. Once uploaded, these images are stored at the project level and can be used anywhere in the project.

Step 2: Attach Images Where Needed

After images are added to the project:

• Images can be attached and detached at any time

• Detaching an image does not remove it from the project. It simply means that the particular image will no longer used in your project

This makes it easy to adjust image placement as your UI changes.

Step 3: Reuse Images Across the Project

• The same image can be reused in multiple places

• No need to re-upload images for each use

• Images remain available unless explicitly removed from the project

This method works well for small dashboards, profile images, icons, and static visuals.

Method 2: Hosting and Using Images in Dualite

Step 1: Set Up Supabase

To begin hosting your images, we’ll use Supabase, a free, user-friendly backend platform that includes public image storage.

To do this-

1. Go to https://supabase.com

2. Click Start Project and sign in using GitHub or email

3. Create a new project (name it something like dualite images)

4. Once inside your project, go to the Storage tab on the left

5. Click + New bucket and give it a name

6. IMPORTANT: Enable Public access to this bucket

7. Click into your new bucket and upload your images

Each image you upload will generate a public URL. This is what you’ll paste into Dualite.

Step 2: Add images in Supabase

Click Upload files on the upper right corner and upload files from your computer

Step 3: Add Image URLs in Dualite

Once your image is hosted publicly:

1. Open your Dualite project

2. Wherever you want to use an image (inside a card, list, or profile), paste the full image URL

3. If you're inserting multiple images, make sure to clearly define to Alpha which image goes where

Note: Dualite is not capable of “guessing” image placement. Be explicit in your prompt or data mappings.

Example Use Case: To-Do List with User Photos

Let’s say you’re building a To-Do list app where each task has a user profile photo attached.

Step 1: Upload Images to Supabase

1. Upload 3 user images to your public Supabase bucket:

1. Get the public URLs by clicking on the three dots next to your uploaded image, for example:

https://nwjoynxylmdeiqgulhte.supabase.co/storage/v1/object/public/to-do-list/Screenshot%202025-06-30%20at%209.27.02%20PM.pngnwjoynxylmdeiqgulhte.supabase.co

Step 2: Use Them in Dualite

In your Dualite prompt, include both the task and the user image clearly. For example:

Conclusion

While Dualite doesn’t support uploading images directly into individual components, it offers flexible ways to work with visuals depending on your project’s needs.

For smaller projects or quick iterations, adding images directly to your Dualite project lets you attach and detach visuals easily without any external setup. When your use case grows—such as handling many images, dynamic content, videos, or user-generated media—external services like Supabase provide a reliable and scalable solution.

Whichever method you choose, the key is structure and clarity. Make sure each image is clearly associated with its intended content, and be explicit about where it should appear in your project. With the right setup, integrating images into your Dualite builds becomes straightforward, dependable, and easy to maintain as your app evolves.