如何在 React 中显示 JSON 文件中的图像

Question

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

我有一个存储图像的 JSON 文件。这将是一个项目列表。 图像 src 不起作用，我无法在函数内导入图像。 我希望有人可以帮助我是 React 新手

Answer 1

1. JSON 不应该是对象，我猜在这种情况下你可以使用数组。

2. 你必须使用缩略图而不是使用“img”，因为你的对象（项目）没有“img”键，但有“缩略图”-> 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>

Answer 2

我终于找到了办法， 我把图像放在公共文件夹“public/images/image.png” 和

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