Conecta en minutos Supabase storage con tu base de datos: sube imágenes al bucket público, copia la URL pública y enlázala a tus posts desde el dashboard. Este flujo manual te muestra cómo cada imagen alimenta el feed y los perfiles sin necesidad de código.
¿Cómo organizar carpetas y subir archivos en Supabase storage?
Desde la interfaz de Supabase, entra a storage y abre el bucket que creaste. Corrige la estructura de carpetas para evitar errores: deja post y profile al mismo nivel. Si post quedó dentro de profile, elimínala con los tres puntitos, confirma la alerta, deselecciona y crea la carpeta al mismo nivel.
Selecciona la carpeta post y elige agregar archivos.
Sube las imágenes preparadas para pruebas.
Verifica el mensaje de subida correcta.
Haz clic en la imagen para ver el preview y sus detalles.
Revisa la metadata: formato, peso y fecha de subida.
La metadata será útil en tus proyectos para conocer la antigüedad y tipo del archivo e incluso, si lo decides, quién subió la imagen.
¿Cómo obtener y usar la URL pública en tus posts?
Puedes obtener la URL desde el preview o desde el menú de los tres puntitos. Cópiala, pégala en una nueva pestaña y verifica que carga. La estructura refleja tu proyecto en Supabase, el servicio de storage, el nombre del bucket (por ejemplo, imágenes), la carpeta post y el archivo .jpg.
Usa “obtener URL” y cópiala al portapapeles.
Abre la URL en el navegador para confirmar acceso.
Recuerda que esta imagen es pública y accesible sin login.
Considera la privacidad: no todo contenido debe ser público.
Aprovecha las otras opciones: renombrar, mover, descargar o eliminar.
Para las pruebas se usan imágenes públicas, lo que acelera el flujo y te permite ver resultados inmediatos en el navegador y luego en tu app.
¿Cómo vincular la imagen con la base de datos y la API?
Abre la tabla de posts y edita la celda de la imagen con un doble clic. Selecciona todo, borra la URL de placeholder y pega la URL pública que copiaste. Presiona Enter para guardar. El cambio queda disponible en la API y en tu base de datos.
Edita en línea con doble clic sobre la celda.
Reemplaza el placeholder por la URL real.
Guarda con Enter para aplicar cambios.
El post ya apunta a su imagen correspondiente.
Repite el proceso con los demás registros.
Habilidades y conceptos que refuerzas durante el proceso:
Bucket público: almacena y sirve imágenes visibles en el feed y perfiles.
Carpetas post y profile: organización correcta al mismo nivel para evitar errores.
Preview y metadata: consulta de formato, peso y fecha para control y auditoría.
URL pública: identificador que tu app usa para mostrar la imagen.
Menú de tres puntitos: acciones rápidas como renombrar, mover, descargar o eliminar.
Edición en tabla: actualización directa que impacta en la API y en la base de datos.
Front end: luego podrás automatizar este flujo desde la interfaz de tu aplicación.
¿Te quedó alguna duda sobre el flujo o la visibilidad de las imágenes? Comenta tus preguntas y cuéntame cómo estás organizando tus carpetas en el bucket.
Acá les generé un Array con un prompt para cada imagen dentro de un esquema que subí clases atrás.
Pueden pegar cada prompt en Gemini esperar unos segundos en nano banana y descargar la imagen en una carpeta para que la puedan cargar al bucket. (Necesitarán imágenes para las siguientes clases)
Les sugiero guardar cada imagen usando el caption como nombre sin el emoji ni tildes o 'ñ'
[{"caption":"Ciudades que nunca duermen 🌃","prompt_image":"A high-angle square photograph of a vibrant city at night, glowing street lights, neon signs, busy traffic with light trails, realistic urban photography, 1:1."},{"caption":"Montañas que tocan el cielo 🗻","prompt_image":"A centered square shot of massive snow-capped mountain peaks piercing through a layer of white clouds, clear blue sky, majestic nature photography, 1:1."},{"caption":"Ríos de aventura 🌊","prompt_image":"A dynamic 1:1 photo of a turquoise river flowing rapidly through a rocky canyon, splashes of water, lush green banks, realistic outdoor adventure style, 1:1."},{"caption":"Desiertos infinitos 🏜️","prompt_image":"A minimalist square photograph of rolling orange sand dunes under a bright sun, ripples in the sand, clear horizon, realistic desert landscape, 1:1."},{"caption":"Selvas llenas de vida 🌴","prompt_image":"A dense tropical jungle scene in a 1:1 frame, sunlight filtering through large green leaves, exotic ferns and mossy trees, vibrant natural colors, 1:1."},{"caption":"Nieve y aventura ❄️","prompt_image":"A square shot of a person in colorful winter gear standing on a pristine snowy slope, pine trees covered in frost, bright winter sunlight, 1:1."},{"caption":"Islas perdidas 🏝️","prompt_image":"An aerial 1:1 view of a small tropical island with white sand and palm trees, surrounded by crystal clear turquoise ocean water, realistic vacation style, 1:1."},{"caption":"Caminos rurales 🛤️","prompt_image":"A narrow dirt road winding through golden wheat fields under a soft afternoon sun, rustic wooden fences, peaceful countryside photography, 1:1."},{"caption":"Metrópolis vibrantes 🏙️","prompt_image":"A square composition showing modern glass skyscrapers reflecting a sunset sky, clean urban architecture, wide street view, realistic city life, 1:1."},{"caption":"Horizontes infinitos 🌅","prompt_image":"A 1:1 calm ocean horizon during a deep orange sunset, sun reflecting on the water surface, minimalist and serene photography, 1:1."},{"caption":"Culturas fascinantes 🎎","prompt_image":"A close-up square shot of traditional colorful cultural textiles and handcrafted artifacts at a museum display, soft natural lighting, 1:1."},{"caption":"Arquitectura sorprendente 🏰","prompt_image":"A symmetrical 1:1 photo of an ancient stone castle with tall towers and a moat, green ivy on walls, historic European style, 1:1."},{"caption":"Senderos secretos 🥾","prompt_image":"A narrow stone path hidden behind thick green foliage and blooming wild flowers, magical misty forest vibe, square format, 1:1."},{"caption":"Océanos azules 🌊","prompt_image":"A top-down square shot of deep blue ocean waves crashing into white foam, high contrast water textures, realistic marine photography, 1:1."},{"caption":"Mercados locales 🛒","prompt_image":"A vibrant 1:1 market stall filled with stacks of fresh colorful fruits and vegetables, wooden crates, authentic street market atmosphere, 1:1."},{"caption":"Fiestas tradicionales 🎉","prompt_image":"A square shot of colorful festive banners and lanterns hanging across a town square, blurred people celebrating in the background, joyful atmosphere, 1:1."},{"caption":"Paisajes de ensueño 💭","prompt_image":"A surreal but realistic 1:1 landscape of a purple lavender field stretching towards a soft pink morning sky with light fog, 1:1."},{"caption":"Caminos de piedra 🪨","prompt_image":"A 1:1 perspective of an ancient cobblestone street in a medieval village, rustic stone houses on the sides, warm sunlight, 1:1."},{"caption":"Aventuras compartidas 👫","prompt_image":"A square photo of two backpacks leaning against a wooden bench overlooking a scenic valley view, symbols of travel and friendship, 1:1."},{"caption":"Caminos sin rumbo fijo 🚶♂️","prompt_image":"A long straight empty highway disappearing into the distance across a flat plain, overcast sky, cinematic road trip photography, 1:1."},{"caption":"Faros solitarios ★","prompt_image":"A square shot of a white and red lighthouse standing on a rocky cliff against a stormy sea and grey sky, realistic coastal photography, 1:1."},{"caption":"Cosechas doradas ★","prompt_image":"A 1:1 close-up of golden stalks of grain in a field, warm 'golden hour' sunlight, soft bokeh background, 1:1."},{"caption":"Reflejos en el lago ★","prompt_image":"A perfectly still mountain lake reflecting the surrounding pine forest and blue sky like a mirror, square format, 1:1."},{"caption":"Puentes históricos ★","prompt_image":"A 1:1 architectural shot of an ornate stone bridge crossing a calm river, reflections in the water, classic European city style, 1:1."}]
Si son creativos pueden crear un for loop para crear las imágenes usando código, usando Javascript, Python, n8n o Buildship.
Good Luck!!
Que increíble aporte John! Muchísimas gracias!
Me gusta mucho como están haciendo estos cursos, las clases son cortas y fácilmente se pueden seguir, últimamente ya no me pierdo mucho y puedo aprender mejor… Gracias por su trabajo !!
Me embalé un poco con el tema de las imágenes, así que les dejo el aporte por si les funciona.
Miren este url :
Entonces hice (AI) este mini script py para descargarlas y ya tenerlas ready, probablemente tardaría menos descargando una por una, pero pos estamos jugando no?
import requests
import os
# ---CONFIGURACIÓN---TEMA="dog" # Cambia el tema aquí
CANTIDAD=10 # Cuántas fotos quieres
ANCHO,ALTO=300,200 # Tamaño pequeño para que pesen poco(bajo almacenamiento)print(f"Descargando {CANTIDAD} imágenes de '{TEMA}'...")for i inrange(1,CANTIDAD+1): url = f"https://loremflickr.com/{ANCHO}/{ALTO}/{TEMA}?lock={i}" nombre_archivo = f"imagen_{i}.jpg"try: respuesta = requests.get(url)if respuesta.status_code==200:withopen(nombre_archivo,'wb')asf: f.write(respuesta.content)print(f"✅ Guardada: {nombre_archivo}")else:print(f"❌ Error en imagen {i}") except Exceptionase:print(f"Error: {e}")print("\n¡Listo! Ya tienes las imágenes en tu carpeta para subirlas a Supabase.")
Un abrazo a todos y gracias Erasmo, hasta ahora el curso va super.
Muy útil conocer como subir imágenes al storage y asociarlas a la base de datos.
¿Se pueden usar URLs de otras fuentes como Unsplash?
Podrías usarlas, pero tendrías que cambiar el formato del frontend para que en lugar de cargar una imagen al storage, le ponga un input donde reciba la URL de la imagen solamente y se guarde en la BBDD
