Как получить URL-адрес изображения из локального Json файла в React. js

Question

Я хочу иметь возможность отображать изображения из локальной папки, получая URL-адрес из файла JSON. Пока что я пробовал:

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 в 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.