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

Question

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

src={require(blog.imUrl)} src={blog.imgUrl} src={require( ${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"
}

Answer 1

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

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

但由于您想json动态地从文件加载图像，因此您应该将图像放入文件夹（如文件夹 ( )images中），然后您可以使用以下命令渲染它：publicpublic/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。