React中使用require加载动态图片路径报错的解决方法

Webpack 打包时需要静态分析资源路径，动态传入 require() 的变量（比如你通过 props 传递的 img）无法被 Webpack 提前识别，因此无法正确打包对应图片资源。而直接写静态路径时，Webpack 能明确找到资源并处理。另外 JSON 文件只能存储纯数据，不能包含 require() 这类 JS 代码，所以直接在 JSON 里写会报错。

方案1：提前静态导入图片，建立路径映射 #

在数据导入的文件中，先手动导入所有需要的图片，再通过映射关系把 JSON 中的路径替换成导入的图片模块：

import data from '../asset/data/blog-post.json'
// 静态导入需要的图片
import postPhoto from '../photo/photo.jpeg'

// 建立 JSON 路径到图片模块的映射
const imageMap = {
  "../photo/photo.jpeg": postPhoto
}

function BlogPostFeed() {
    const post = data.map(item => {
        return <BlogPost
            key={item.id}
            img={imageMap[item.img]}
        />
    })
    return (
        <>
            {post}
        </>
    )
}

function BlogPost(props) {
    const { img } = props;
    // 直接使用映射后的图片模块，无需再调用 require
    return (
        <>
            <img src={img} alt="photo" />
        </>
    )
}

方案2：将图片移至 public 目录，直接使用绝对路径 #

把图片放到项目根目录的 public 文件夹下（比如 public/photo/photo.jpeg），然后修改 JSON 文件中的路径为绝对路径：

[ 
 {
        "id": 1,
        "img": "/photo/photo.jpeg"  
 }
]

组件中直接使用路径即可，无需 require：

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={img} alt="photo" />
        </>
    )
}

这种方式下，图片会被直接作为静态资源部署，不需要经过 Webpack 打包。

方案3：使用 require.context 批量导入图片 #

如果图片数量较多，可以用 require.context 批量导入指定目录下的所有图片，再根据 JSON 中的路径匹配：

import data from '../asset/data/blog-post.json'

// 创建上下文，匹配 ../photo 目录下的所有 jpeg 图片
const imageContext = require.context('../photo', false, /\.jpeg$/);

function BlogPostFeed() {
    const post = data.map(item => {
        // 提取 JSON 路径中的文件名（比如从 "../photo/photo.jpeg" 得到 "photo.jpeg"）
        const imgFileName = item.img.split('/').pop();
        // 通过上下文获取对应的图片模块
        const imgUrl = imageContext(`./${imgFileName}`);
        return <BlogPost
            key={item.id}
            img={imgUrl}
        />
    })
    return (
        <>
            {post}
        </>
    )
}

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={img} alt="photo" />
        </>
    )
}

内容的提问来源于stack exchange，提问作者Leung Cho-shing