我正在尝试使用 require() 方法将图片的路径粘贴到 img 标记内。
这是组件。道具从父级正确传递，因为 console.log(img) 返回正确的路径。
import data from '../asset/data/blog-post.json'
function BlogPostFeed() {
const post = data.map(item => {
return <BlogPost
key={item.id}
img={item.img}
/>
})
return (
<>
{post}
</>
)
}
function BlogPost(props) {
const { img } = props;
return (
<>
<img src={require(img)} alt="photo" />
</>
)
}
这就是 json 文件的样子。
[
{
"id": 1,
"img": "../photo/photo.jpeg"
}
]
我确信所有文件夹路径都是正确的。
我尝试粘贴路径 ![sth]({require"../photo/photo.jpeg"})
或
${img}
)} alt="sth"/ > 可以。
我还尝试将 json 文件更改为 "img": require("../photo/photo.jpeg") 但随后出现 json 文件错误。
弹出错误找不到模块'../photo/photo.jpeg'。
参考下面的帖子，我通过将
.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 在代码运行之前并不知道您所引用的文件，但为时已晚。在这种情况下，我建议两种可能的解决方案：
这是现代 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 &&
}
);
}请注意，您需要在 JSON 文件中提供项目根目录的相对路径才能正常工作。
create-react-app，则可以将图像放入公共文件夹中。然后，您可以通过相对于公共文件夹的路径来引用这些图像：function BlogPost(props) { const { img } = props; return ( <>
);
}请注意，在 JSON 文件中，您只需提供公共目录的路径。