de verdad no me quedo claro esa forma de inyectar las imagenes y la vi 3 veces
de verdad no me quedo claro esa forma de inyectar las imagenes y la vi 3 veces
Hola Joan,
Entiendo que puedas estar un poco confundido con la forma en que se están inyectando las imágenes en este caso. Vamos a desglosar un poco el proceso para que sea más claro.
En el video, el instructor está creando una función en imageFilter.js
que se encarga de determinar qué imagen (icono) debe mostrarse basándose en el tipo de dato que recibe.
Para esto, primero se importan las imágenes desde sus respectivos archivos SVG en assets/images
. Luego, se crea un objeto llamado images
donde cada propiedad del objeto corresponde a un tipo de dato (por ejemplo, 'restaurante', 'salud', etc.) y el valor de cada propiedad es el componente Icono
con la imagen correspondiente.
Aquí tienes un ejemplo de cómo se ve este objeto:
const images = {
restaurante: <Icono src={alimentacion} alt='restaurante' />,
salud: <Icono src={salud} alt='salud' />,
// y así sucesivamente para cada tipo
};
Luego, en el componente donde se va a utilizar esta función (en este caso, Card
), se importa imageFilter
y se llama a esta función pasándole el tipo como argumento. La función imageFilter
entonces devuelve el componente Icono
correspondiente al tipo que se le pasó.
Por ejemplo, si el tipo es 'restaurante', la función imageFilter
devolverá <Icono src={alimentacion} alt='restaurante' />
.
Espero que esta explicación te ayude a entender mejor el proceso de inyección de imágenes en este caso. Si todavía tienes dudas, te recomendaría que intentes escribir el código por ti mismo y veas cómo funciona en la práctica, ya que a veces eso puede ayudar a aclarar las cosas.
Espero haber ayudado y buenos estudios!