How to show a image in React from a JSON file-CodePudding

// 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>

I have a JSON file that stores the images. This is gonna be for a list of projects. The image src is not working and I can't import an image inside the function. I hope someone could help I am new to React

CodePudding user response：

JSON should not be object, I guess in this case you can use array.
instead of using "img" you must use thumbnail, cause your object(project) has no "img" key, but has "thumbnail"-> 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>

CodePudding user response：

I finally found a way, I put the images on the public folder "public/images/image.png" and

const Projects = ({projectData}) => {
    <img src={`images/${projectData.images.main}`}/>
}