Esta es mi primera publicación, así que pido disculpas si falta información vital.

Estoy construyendo una página web con reaccionar. Estoy tratando de llenar una página en mi página web mapeando un archivo JSON relativamente simple.

Todo se está poblando bien, excepto la imagen. Estoy tratando de usar rutas de archivo relativas para la fuente de la imagen, pero todo lo que he intentado hasta ahora solo da como resultado un ícono de imagen roto.

Hasta ahora, he intentado solucionar problemas colocando una URL de imagen de Internet en el JSON que funciona bien.

Aquí está mi código de reacción:

 {Services.map((item) => { return ( <Fragment> <li className="services-item"> <img src={item.image} className="services-item-img" /> <div className="services-item-text"> <div className="h1">{item.title}</div> <div className="p1">{item.paragraph}</div> </div> </li> <div className="diamonds-container"> <img src={Diamonds} className="diamonds" /> </div> </Fragment> ); })}

y aquí está mi archivo JSON:

 [ { "title": "DESIGN & WEB", "paragraph": "Brand consistancy and agility are important, which is why we do it all in one place. We want to make this complex task as simple as possible for everyone we work with.", "image": "../images/pen.svg" }, { "title": "MOTION DESIGN", "paragraph": "Our talent pool has a long history in the motion design world. From creating graphics for New Zealand's largest broadcast outlets, to animating content for hugely succesful YouTube channels across the globe.", "image": "../images/keyframe.svg" }, { "title": "PHOTO & VIDEO", "paragraph": "Photography, film and video is a long term passion of ours. Every photography or video project that we have been a part of, takes with it a part of our heart and soul.", "image": "../images/video.svg" } ]

Aquí hay una captura de pantalla de mi estructura de carpetas también si es útil: Estructura de carpetas del proyecto:

¡Gracias!