Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Esta lección está disponible únicamente para suscriptores.
Regístrate o inicia sesión para continuar aprendiendo:
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 preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript
Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos: