参考下面的帖子，我通过将 .json 文件更改为 .js 文件，找到了一个更简单的解决方案。然后，按照帖子的建议，我将数据转换为：

const data = [ 
  {
    id: 1,
    img: require("../photo/photo.jpeg")  
  }
]
export default data;

然后在组件中，我只使用了

如何在 require 中使用模板文字？ (require(`${somePath}`))

该错误与 React 底层的 webpack 如何与 require() 函数配合使用有关。 require() 不是标准的 JavaScript 函数，而是 Node.js 和 webpack 提供的功能。 require() 在构建过程中执行模块的同步读取，这意味着 webpack 需要在构建时（应用程序运行之前）而不是运行时了解模块之间的依赖关系。

因此，当您直接使用 require("../photo/photo.jpeg") 时，webpack 知道将此文件包含在构建包中，因为路径是静态的，而不是动态的。但是，当您尝试使用 require(img) 时，webpack 在代码运行之前并不知道您所引用的文件，但为时已晚。

在这种情况下，我建议两种可能的解决方案：

1. 使用动态导入：

这是现代 JavaScript 提供的功能，webpack 也支持它。以下是您在组件中使用它的方法：

import React, { useState, useEffect } from 'react';

function BlogPost(props) {
    const { img } = props;
    const [imgSrc, setImgSrc] = useState();

    useEffect(() => {
        import(`../${img}`)
        .then((image) => setImgSrc(image.default))
        .catch((err) => console.error(err));
    }, [img]);

    return (
        <>
            {imgSrc && <img src={imgSrc} alt="photo" />}
        </>
    );
}

请注意，您需要在 JSON 文件中提供项目根目录的相对路径才能正常工作。

1. 使用公共文件夹提供图像： 如果您使用 create-react-app，则可以将图像放入公共文件夹中。然后，您可以通过相对于公共文件夹的路径来引用这些图像：

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={process.env.PUBLIC_URL + '/photo/photo.jpeg'} alt="photo" />
        </>
    );
}

请注意，在 JSON 文件中，您只需提供公共目录的路径。