Проблемы с чтением изображений из JSON файла в React

Question

Я работаю над проектом React, который включает загрузку локальных изображений, связанных в файле JSON. Сегодня мне удалось заставить его работать, но он перестал работать, и я не уверен, что изменилось. Теперь я получаю сообщение об ошибке: «Ошибка: не удается найти модуль» ./portfolio/image.jpg'".

В моем каталоге «publi c» есть две папки: «графика» и «портфолио». ", содержащий изображения для определенных c разделов.

В моем каталоге« sr c »у меня есть папка« components »со всеми моими компонентами в подпапках. В папке «компоненты» находится папка «данные», которая содержит два файла JSON. Пути к изображениям набираются следующим образом:

    {
        "title": "Image title",
        "description": "Image description",
        "img": "./graphics/image.jpg"
    }

и

    {
        "title": "Image title",
        "description": "Image description",
        "img": "./portfolio/image.jpg",
        "demo": "https://www.demolink.com",
        "repo": "https://www.repo.com"
    }

Файлы JSON импортируются в компонент Portfolio. js следующим образом:

import portfolio from "../data/portfolio.json";
import graphics from "../data/graphics.json";

И данные настроены для отображения следующим образом:

{
    !this.state.showGraphics ?

    portfolio.map(item => (
        <GridItem bool={this.state.showGraphics} projectDemo={item.demo} projectImg={item.img} key={item.title}
            projectDescription={item.description} projectTitle={item.title}
            projectRepo={item.repo} />
    )) :

    graphics.map(item => (
        <GridItem bool={this.state.showGraphics} projectDemo={null} projectImg={item.img} key={item.title}
            projectDescription={item.description} projectTitle={item.title}
            projectRepo={null} handleModal={() => this.handleModal(item.img, item.title, item.description)} />
    ))
}

А вот компонент GridItem, упомянутый выше:

import React from "react";
import "./GridItem.css";

function GridItem(props) {
    return (
        <div className="portfolio-card card col-sm-6 col-lg-4">
            {!props.bool ?
                <div className="card-body">
                    <a href={props.projectDemo} target="blank" className="btn-primary"><img alt="" src={require(`${props.projectImg}`)} width="100%" className="card-img-top img-responsive" /></a>
                    <div className='card-footer'>
                        <h4 className="card-title">{props.projectTitle + " "}</h4>
                        <p>{props.projectDescription} <a href={props.projectRepo} target="blank"> Repository</a></p>
                    </div>
                </div> :
                <div className="card-body">
                    <img alt="" src={require(`${props.projectImg}`)} width="100%" data-toggle="modal" data-target="#exampleModal" onClick={props.handleModal} className="card-img-top img-responsive" />
                    <div className='card-footer'>
                        <h4 className="card-title">{props.projectTitle + " "}</h4>
                        <p>{props.projectDescription}</p>
                    </div>
                </div>
            }
        </div>
    )
}
export default GridItem;

Может ли кто-нибудь увидеть, что я делаю здесь не так? Я не знаю, почему это работало раньше, а не сейчас. Я отменил все изменения, но по-прежнему ничего. Спасибо.