Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Local images

Veamos cómo podemos agregar imágenes a nuestro proyecto, y cargarlas de manera local para nuestros productos.

Guardar una imagen localmente

Para almacenar una imagen dentro de tu proyecto Vue 3, sigue estos pasos:

Descarga la imagen que deseas usar.
Guarda la imagen dentro de tu proyecto, específicamente en la carpeta public.
Asigna un nombre a la imagen, por ejemplo: silla.webp.

La imagen puede tener distintos formatos, como JPG, PNG o WebP.

Accediendo a la imagen en el proyecto

Si la imagen se encuentra en la carpeta public, puedes acceder a ella directamente desde la barra de navegación.

Por ejemplo, si la imagen se llama silla.webp, puedes acceder a ella usando la siguiente URL:

/silla.webp

¿Por qué almacenar imágenes localmente?

Es más cómodo descargar y usar imágenes directamente en el proyecto.
Las URLs de imágenes externas pueden dejar de estar disponibles.
Las imágenes almacenadas en el proyecto siempre estarán accesibles.

Mostrando la imagen en el proyecto

Para mostrar la imagen dentro de tu aplicación Vue 3, usa la siguiente sintaxis en el código:

<img src="/silla.webp" alt="Silla" />

Consideración sobre las rutas

Es importante agregar un / al inicio de la ruta de la imagen.

Si la imagen se usa en una página con varios segmentos en la URL, este slash inicial evitará posibles errores al buscar la imagen.

Siguiendo estos pasos, la imagen que has guardado en la carpeta public se mostrará correctamente en tu proyecto Vue 3.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Por cierto, respecto a las imágenes, no necesariamente necesitas una URL pública de otro sitio, también puedes almacenar tus propias imágenes y mostrarlas. Veamos cómo hacer ello. Digamos que quiero cambiar esta imagen de la silla, que es una URL pública que está alojada en otra página, por una imagen de una silla que yo tengo localmente, o sea, en mi computadora. Por ejemplo, digamos que me gusta esta imagen, entonces la voy a descargar. Esta imagen la tengo que guardar entonces dentro de mi proyecto vue-3-ecommerce, específicamente dentro de la carpeta public. Aquí voy a guardar esta imagen que se va a llamar silla, en este caso viene con esta extensión webp, podría tratarse de un JPG, de un PNG, etc. Guardo la imagen. ¿De qué manera puedo mostrar esta imagen para este producto? Bueno, si te das cuenta nosotros podemos acceder desde la barra de navegación hacia cart, hacia about, realmente ahora también podemos acceder hacia silla. ¿Por qué? Porque la imagen se encuentra en la carpeta public de nuestro proyecto. La carpeta public se va a encargar de servir archivos estáticos como imágenes, en este caso, audios, etc. sobre nuestra ruta principal. Siendo ese el caso, ya podemos usar dicha imagen. Entonces, la URL para la imagen de la silla será ahora silla.webp. Explico esto porque muchas veces resulta más cómodo descargar imágenes y luego usarlas que estar buscando URLs, también porque estas URLs en algún punto pueden dejar de estar disponibles. En cambio, las imágenes que tú mismo almacenas en tu proyecto siempre estarán allí. Guardamos cambios y como vemos ya se está mostrando la imagen de la silla que hemos descargado. Solo recuerda agregar siempre un slash al inicio porque si en algún momento quieres mostrar imágenes, en una ruta que tiene varios segmentos podrías tener algún inconveniente. Este slash se asegura que la imagen se busque de manera absoluta y no de manera relativa. Muy bien.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code