¡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

Product image & URL

En esta lección agregamos imágenes para nuestros productos, adaptando nuestro type y componentes.

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 pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

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

Capítulos



















































































83

Product image & URL









































Espera un momento ...

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

Sólo debes ingresar tus datos: