如何在React.js中从本地Json文件获取图像Url

我希望能够通过从 JSON 文件获取 URL 来显示本地文件夹中的图像。到目前为止我已经尝试过：

src={require(blog.imUrl)} src={博客.imgUrl} src={需要(${blog.imgUrl})}

当我使用 require 时遇到错误：

错误：找不到模块“../../images/safe-image.jpeg”

import { useHistory } from 'react-router-dom';
import { Col, Row, Container, Image } from 'react-bootstrap';
import blogArticles from './blog.json';
import './BlogCard.css';

export default function BlogCard() {
  const history = useHistory();

  function handleClick() {
    history.push('/`${blog.id}`');
  }

  return blogArticles.map((blog) => {
    return (
      <Container key={blog.id} className="blogContainer">
        <Row>
          <Col xs={6} md={6} lg={8}>
            <h3 className="blogTitle">{blog.title}</h3>
            <span className="blogBody">{blog.body.substring(0, 250)}...</span>
            <button onClick={handleClick} className="readMoreButton">
              Read More
            </button>
          </Col>
          <Col xs={4} md={4} lg={3} className="imageContainer">
            <Image src={require(blog.imgUrl)} roundedCircle />
          </Col>
        </Row>
      </Container>
    );
  });
}```


Here is my JSON File structure :

{
    "id": 3,
    "title": "abc",
    "body": "abcdefg",
    "author": "as",
    "imgUrl": "../../images/leon-biss.jpg"
}

您可以使用它来导入和显示打开的图像src文件夹（位于 javascript 文件旁边）：

import img from "./img1.png";
const imgComponent = () => <img src={img} />

但因为你想从加载图像json动态文件，您应该将图像放入类似的文件夹中images in public文件夹 （public/images/img1.png），然后你可以使用以下方式渲染它：

<img src="/images/img1.png" />

• 注1：请注意，目前您的json文件包含相对于脚本文件的路径，但您应该将其更改为图像的路径public folder反而。 （如果你不能改变json文件，您也可以使用代码映射该 url。）
• 注意2：我假设你正在使用creat-react-app它有public默认文件夹。如果没有，请搜索how to serve static files in react.