Estoy trabajando con un JSON local que tiene la siguiente estructura:
{ "Data": [{ "image": "../Images/project1.png", }, { "image": "../Images/project2.png", }, { "image": ".../Images/project3.png", } ] }Estoy mapeando este JSON en mi componente. Quiero que muestre cada imagen del JSON. Este es mi componente simplificado:
import data from '../Data/Projects.json' function ProjectsMenu(props){ return( {data.Data.map(s =>{ return( <img src={s["image"]} alt={s["image"]}></img> ) })} }Este código no carga las imágenes en el sitio web. Si importo manualmente las imágenes, funciona:
import Img from '../Images/present.png' ... <img src={Img} alt={s["image"]}></img>Quiero poder importarlos dinámicamente para que, si se modifica el JSON, no tenga que volver atrás y agregar la importación de imágenes al código.
No importa si sus fotos están en Facebook, Google o host local; eso. Es una arquitectura cliente/servidor que utiliza el mismo protocolo tcp/ip.
Entonces, como está usando cra, la carpeta de sus fotos debe estar dentro de su carpeta pública, al lado de su index.html es
Para obtener las imágenes <img src=“/images/image-name.png” />
import data from '../Data/Projects.json' function ProjectsMenu(props){ return( {data.Data.map(s =>{ return( <img src={require(s["image"])} alt={s["image"]}></img> ) })} } Cuando usamos dinámicamente, s["image"] no cargará la imagen, necesitamos cargar la imagen manualmente mediante require(s["image"]) .
Si no funcionó, intente import(s["image"]) .