Uso de imágenes en Lovable

Aprende a agregar imágenes a tus proyectos de Lovable

Para agregar imágenes, puedes hacer una de estas cuatro cosas:

Carga la imagen en el chat de instrucciones

Simplemente súbelos al chat y explícale al Agente de Lovable dónde y cómo quieres que aparezcan en tu proyecto. Por ejemplo:

Cambia el logotipo de la barra de navegación por esta imagen

Reemplázalo en el editor visual

Puedes reemplazar una imagen existente directamente usando la funcionalidad del editor visual:

1. Paso 1

   Haz clic en la herramienta “Edit”.

2. Paso 2

   Selecciona el elemento de imagen que quieres reemplazar.

   
3. Paso 3

   Reemplaza la imagen.

   

Usar una URL de imagen externa

Una forma de añadir imágenes a tu proyecto es haciendo referencia a una imagen desde una URL externa. Este método te permite usar imágenes alojadas en plataformas externas como Unsplash, Imgur o cualquier otro servicio de alojamiento de imágenes. Ten en cuenta los derechos de autor al usarlas.

Así es como puedes escribir una instrucción para que Lovable use una imagen externa:

1. Paso 1

   Encuentra la imagen que quieres usar.

   Por ejemplo, puedes visitar un sitio como Unsplash, seleccionar una imagen y copiar su URL.

2. Paso 2

   En la instrucción de tu proyecto, simplemente dile a Lovable que use esa imagen especificando la URL. Por ejemplo:

   Usa la imagen de esta URL 
   https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png 
   para la imagen de la sección hero.
   

Uso de imágenes desde tu directorio público de GitHub

Otro método para agregar imágenes a tu proyecto de Lovable es usar imágenes subidas al directorio public de tu repositorio de GitHub conectado. A continuación te mostramos cómo hacerlo:

1. Conecta tu repositorio de GitHub

   Asegúrate de que tu proyecto esté conectado a tu repositorio de GitHub. Aquí puedes ver cómo conectar tu repositorio.

2. Localiza la carpeta public

   Dentro de tu repositorio de GitHub, navega al directorio public. Esta carpeta se utiliza normalmente para alojar recursos como imágenes que se pueden referenciar en tu proyecto.

3. Agregar archivo

   Haz clic en Add file y luego, en el menú desplegable, selecciona la opción Upload files.

4. Sube una imagen

   El siguiente paso es transferir tu imagen a tu repositorio:

   • Arrastra y suelta la imagen en la carpeta public, o
   • Haz clic en el enlace “choose your files” para buscar y seleccionar el archivo de imagen.
5. Confirma (commit) los cambios

   Después de seleccionar tu imagen, escribe un mensaje de commit sencillo (por ejemplo, “Adding image files to be used in the app”) y haz clic en “Commit changes” para guardar el archivo en tu repositorio.

6. Obtén la ruta de la imagen

   Una vez que el archivo se haya subido, selecciónalo y luego haz clic en el ícono de copiar junto al nombre del archivo para copiar la ruta de la imagen. Esta ruta se usará en tu instrucción de Lovable.

7. Usa la imagen en Lovable

   Ahora puedes hacer referencia a esta imagen en tu proyecto usando una instrucción como la siguiente:

   Agrega una imagen adicional a la sección hero. 
   Esta vez, usa esta de mi repositorio local: public/c-64-close-up.jpg.jpeg
   

   Asegúrate de usar el nombre de tu imagen y la ruta que copiaste en el paso anterior.

   Subir imágenes grandes a tu repositorio de GitHub puede hacer que aumente de tamaño, lo que puede afectar el rendimiento de Lovable (tiempos de clonación del repositorio más largos, inicio más lento de las vistas previas/sandbox).

   Intenta optimizar tus imágenes antes de subirlas a tu carpeta public, comprimiéndolas y usando dimensiones que sean relevantes para tu caso de uso. Por ejemplo, no uses una imagen de tamaño Full HD si solo se mostrará como un ícono pequeño.

Para ayudarte a entender mejor cómo integrar imágenes usando los métodos descritos arriba, tenemos un proyecto que puedes explorar: Ejemplo de Proyecto de Lovable. En este proyecto puedes ver las instrucciones reales y cómo funciona cada método en la práctica.

Además, aquí tienes un repositorio público de GitHub que incluye los commits, las imágenes subidas y todos los detalles de la implementación. Puedes ver el repositorio aquí: GitHub: Adding Images Example.

Siéntete libre de explorar el proyecto y el repositorio para profundizar tu comprensión y mejorar tus habilidades de implementación.