Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Product image & URL
En esta lección agregamos imágenes para nuestros productos, adaptando nuestro type y componentes.
Falta de imágenes en los productos
Si nos vamos a nuestra carpeta model y abrimos el archivo de types, vamos a ver que un producto tiene un ID, un name y un price. Sin embargo, nos falta algo muy importante: una imagen.
Nos falta definir una imagen para los productos de tal manera que esta imagen sea distinta para cada uno de ellos, ya que actualmente tenemos la misma para todos.
De la misma forma, nos gustaría mostrar aquí una pequeña imagen circular del producto en el carrito de compras.
Trabajar con imágenes
Puedes dedicar un tiempo para escoger las imágenes que quieres asignar a cada uno de tus productos. Solo ten cuidado de no usar imágenes con derechos de autor.
Puedes probar una búsqueda como la siguiente: free copyright.
Por ejemplo, aquí encontré una imagen, esta imagen termina en .jpg, y entonces podemos usar esta imagen.
Si no quieres ponerte a buscar una imagen para cada producto, puedes también usar algún generador de imágenes aleatorias.
Por ejemplo, tenemos Lorem Picsum, aunque no es la única alternativa, seguro que hay muchas más.
La idea es que encuentres una URL para cada uno de tus productos.
Asignación de imágenes
Por ejemplo:
- Para silla ya tengo esta imagen.
- Para monitor ya tengo esta otra.
- Para micrófono todavía falta una.
Recuerda que lo que necesitas es la URL de la imagen.
Aquí ya tengo tres imágenes. Entonces, ¿qué voy a hacer con esta URL?
Voy a dirigirme al componente ProductList, que es el componente que contiene por ahora los productos, y simplemente voy a agregar una propiedad image para que coincida con lo que hemos definido en el tipo.
image será un string, es decir, una cadena de texto.
- Para silla, asigno esta URL.
- Para monitor, asigno esta otra URL.
- Para micrófono, asigno esta otra URL.
Creación de nuevos productos
¿Qué va a pasar con los demás?
Primero, hay que asegurarnos de no repetir el ID de los productos. Vamos a inventarnos tres productos más:
- Parlante
- Audífonos
- Mouse gamer
A estos últimos tres no les vamos a poner imágenes a propósito para asegurarnos de que reciban una imagen por defecto.
Guardamos hasta aquí y la idea es empezar a usar este atributo image.
Implementación en ProductCard
Nos dirigimos entonces a ProductCard. Aquí, en nuestro componente v-img, el atributo source ya no será el que teníamos, sino que será la imagen de cada producto.
Si el producto no tiene una imagen, mostraremos una imagen por defecto.
Para ello, una forma sería poner aquí la condición, pero como hemos comentado ya, no es recomendable poner condiciones en el template.
Lo que nos conviene es definir una computed property.
Creación de computed property
Vamos a crear una computed property que se va a llamar productImageUrl.
Aquí lo que vamos a hacer es devolver product.image. Si el producto no tiene una imagen asociada, vamos a devolver una cadena con la imagen por defecto.
Así, en el código:
src="productImageUrl"
No olvides los dos puntos (:) porque queremos evaluar esta expresión. Es una variable, no un valor literal.
Resultado final
Guardamos y al volver ya tenemos este resultado:
- Imagen de silla ✅
- Imagen de monitor ✅
- Imagen de micrófono ✅
- Parlante, audífonos y mouse gamer reciben la imagen por defecto ✅
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
¿Qué otro dato nos falta para nuestros productos? Si nos vamos a nuestra carpeta model y abrimos el archivo de types, vamos a ver que un producto tiene un ID, tiene un name y tiene un price. Sin embargo, nos falta algo muy importante que es una imagen. Nos falta definir una imagen para los productos de tal manera que esta imagen sea distinta para cada uno de ellos, ya que actualmente tenemos la misma para todos. De la misma forma nos gustaría mostrar aquí una pequeña imagen circular del producto en el carrito de compras. ¿Cómo podemos trabajar con imágenes? Puedes dedicar un tiempo para escoger las imágenes que quieres asignar a cada uno de tus productos. Solo ten cuidado de no usar imágenes con derechos del autor. Puedes probar una búsqueda como la siguiente, free copyright. Por ejemplo, aquí encontré una imagen, esta imagen termina en .jpg y entonces podemos usar esta imagen. Si no quieres ponerte a buscar una imagen para cada producto puedes también usar algún generador de imágenes random. Por ejemplo tenemos lorem picsum, no es la única alternativa, seguro que hay muchas más. La idea es que encuentres una url para cada uno de tus productos. Por ejemplo, para silla ya tengo esta de aquí, para monitor ya tengo este de aquí, para micrófono solamente me faltaría. Bien, recuerda que lo que necesitas es la url de la imagen. Yo aquí ya tengo 3. Entonces ¿qué voy a hacer con esta url? Voy a dirigirme al componente ProductList que es el componente que contiene por ahora los productos y simplemente voy a agregar una propiedad image para que coincida con lo que hemos definido en el tipo. Image será un string o sea una cadena de texto, ¿sí?, para silla voy a poner esto de aquí, para monitor voy a poner esto de aquí y para micrófono voy a poner esto de acá ¿Qué va a pasar con los demás? Bueno, primero que todo hay que asegurarnos de no repetir el id de los productos y vamos a inventarnos tres productos más, por ejemplo parlante, audífonos y mouse gamer, ¿sí?, a estos últimos tres no les vamos a poner imágenes a propósito para asegurarnos que reciban una imagen por defecto. ¿Sí?, entonces guardamos hasta aquí y la idea es empezar a usar este tributo image. Nos dirigimos entonces a ProductCard y aquí en ProductCard, en nuestro componente v-img, el atributo source ya no será este de acá sino que será la imagen de cada producto, y si el producto no tiene una, mostraremos esta imagen por defecto. Para ello, una forma sería poner aquí la condición, pero como hemos comentado ya, no es recomendable poner condiciones en el template. Entonces lo que nos conviene es definir una computed property. Vamos a crear una computed property que se va a llamar productImageUrl, aquí lo que vamos a hacer es devolver product.image, y si el producto no tiene una imagen asociada vamos a devolver esta cadena para proporcionar una imagen por defecto. ¿Sí?, entonces aquí src será igual a productImageUrl y no olvides los dos puntos porque queremos evaluar esta expresión, ¿sí?, es una variable, no es un valor literal. Hasta aquí guardamos y al volver ya tenemos este resultado. Tenemos aquí la imagen de la silla, la imagen del monitor, la imagen del micrófono, y como parlante, audífonos y mouse gamer no tienen imágenes, se les está proporcionando esta imagen por defecto.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript