Local images

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.

¡Suscríbete y continúa aprendiendo!

Local images