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:
Adding images directly to your Dualite project
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-
Go to https://supabase.com
Click Start Project and sign in using GitHub or email
Create a new project (name it something like dualite images)
Once inside your project, go to the Storage tab on the left
Click + New bucket and give it a name
IMPORTANT: Enable Public access to this bucket
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:
Open your Dualite project
Wherever you want to use an image (inside a card, list, or profile), paste the full image URL
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
Upload 3 user images to your public Supabase bucket:
Get the public URLs by clicking on the three dots next to your uploaded image, for example:
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.
Last updated