// JSON File { "project": [ { "id": "0", "title": "Old Portfolio", "images" :{ "main": "portfolio.png", "second": "" }, "content": ["This is one of my first few projects I made as a beginner", "At this project, I learned using JavaScript for making interactive elements like a navbar button. This project was not really something I'm proud of. Hence why I'm making a new portfolio but now with react"] , "tags": ["HTML5", "CSS", "JavaScript", "jQuery"] }, { "id": "1", "title": "Twitter Clone", "images" :{ "main": "twitter_clone.png", "second": "" }, "content": ["Project I made to improve my skills in PHP and MySQL.", "At this project, I used MySQL to store data and use PHP to alter what my website will show to the user. I've also used AJAX and JQuery for processing data from MySQL with PHP."] , "tags": ["HTML5", "CSS", "JavaScript", "PHP", "MySQL", "jQuery", "AJAX"] } ] } // projectList is from a JSON file // ProjectList.js {projectList.map((project) => ( <Projects key={project.id} projectData={project}/> ))} // Projects.js const imagePath = "../images/"; const mainImage = imagePath + projectData.images.main const Projects = ({projectData}) => { <img style={{ width: "100%", }} src={mainImage}alt="" /> } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Finalmente encontré una manera, puse las imágenes en la carpeta pública "public/images/image.png" y
const Projects = ({projectData}) => { <img src={`images/${projectData.images.main}`}/> }JSON no debería ser un objeto, supongo que en este caso puedes usar array.
en lugar de usar "img", debe usar la miniatura, porque su objeto (proyecto) no tiene la clave "img", pero tiene "miniatura" -> const mainImage = imagePath + projectData.thumbnail.main
// JSON File [ { "id": "0", "title": "Old Portfolio", "thumbnail" :{ "main": "portfolio.png", "second": "" }, "content": ["This is one of my first few project I made as a beginner", "At this project I learned using JavaScript for making interactive elements like a navbar button. This project was not really something I'm proud of. Hence why I'm making a new portfolion but now with react"] , "tags": ["HTML5", "CSS", "JavaScript", "jQuery"] }, { "id": "1", "title": "Twitter Clone", "thumbnail" :{ "main": "twitter_clone.png", "second": "" }, "content": ["Project I made to improve my skills in PHP and MySQL.", "At this project I used MySQL to store data and use PHP to alter what my website will show to the user. I've also used AJAX and JQuery for processing data from MySQL with PHP."] , "tags": ["HTML5", "CSS", "JavaScript", "PHP", "MySQL", "jQuery", "AJAX"] } ] // projectList is from a JSON file // ProjectList.js {projectList.map((project) => ( <Projects key={project.id} projectData={project}/> ))} // Projects.js const imagePath = "../images/"; const mainImage = imagePath + projectData.thumbnail.main const Projects = ({projectData}) => { <img style={{ width: "100%", }} src={mainImage}alt="" /> } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>