Quiero importar algunas imágenes de un archivo JSON local a mi componente. Quiero que coincidan con los datos que obtengo de la API.
Mi archivo JSON es:
[ { "id": 1, "dwarf": "/assets/races/dwarf.png", "slug": "dwarf" }, { "id": 2, "elf": "/assets/races/elf.png", "slug": "elf" } ]Tengo esto para mapear el archivo JSON:
{images.map((item, index) => ( <C.Image key={index} item={item} > <img src={`item.${data.slug}`} /> <img src={item.dwarf} /> </C.Image> {data.slug} se obtiene de la API y coincide con el nombre de la propiedad que paso a cada imagen dentro del archivo JSON. Cuando inserto <img src={item.dwarf} /> , se muestra la imagen, pero es la misma para todos. Cuando inserto <img src={`item.${data.slug}`} /> , la imagen no se muestra y en la consola muestra <img src="item.dwarf"> <img src="item.elf"> , en lugar de la imagen. ¿Cuál es la sintaxis para usar {data.slug} reemplazando cada nombre y mostrando la imagen?
Puede utilizar la notación de corchetes para acceder dinámicamente a las propiedades de los objetos. Se parece a esto:
const obj = { foo: 123, bar: 321 } const propName = 'foo' const prop = obj[propName] console.log(prop) // output: 123Entonces en tu caso:
<img src={item[item.slug]} />