¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

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.

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




















































































84

Local images








































Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: