1
respuesta

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

1 respuesta

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!