React中如何通过Props传递图片路径实现动态加载？

项目中有大量图片需根据用户需求动态展示，已将所有图片路径存储在本地db.js文件中，尝试通过Props传递路径给组件显示图片但无法生效，且不想手动导入50余张图片，希望找到简便方法。

尝试过两种方式均无效：

1. 直接将props.img作为img标签的src属性：

function Component(props){
    return(
        <div>
            <img src={props.img} alt="..."/>
        </div>
    )
}

2. 异步导入传递路径：

function Component(props){
    async function importImage(){
        const img = await import(props.img)
        return img.default
    }
    return(
        <div>
            <img src={importImage()} alt="..."/>
        </div>
    )
}

本地db.js内容：

const db = 
{
    winterJakcets: [
        {
            name: "Canada Goose Jacket",
            gender: "men",
            img: "../src/media/winterJacket/CGwinterJ_11.webp",
            price: 1299,
            description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
            imgArray: ["../media/winterJacket/CGwinterJ_12.webp","../media/winterJacket/CGwinterJ_12.webp", "../media/winterJacket/CGwinterJ_12.webp"]
        }
    ]
}

方法1：用require.context批量预加载图片 #

借助Webpack的require.context可以批量导入指定目录下的图片，后续通过路径匹配直接获取图片URL。

1.1 创建图片加载工具 #

新建imageLoader.js文件：

// 批量加载src/media下所有webp格式的图片
const imageContext = require.context('../src/media', true, /\.webp$/);

// 根据相对路径获取图片URL
export const getImageUrl = (relativePath) => {
    // 统一路径格式，匹配db中的路径
    const normalizedPath = relativePath.replace('../src/media/', './');
    try {
        return imageContext(normalizedPath);
    } catch (err) {
        console.error('图片路径不存在:', relativePath);
        return '';
    }
};

1.2 组件中使用 #

import { getImageUrl } from './imageLoader';

function Component(props){
    const imgUrl = getImageUrl(props.img);
    return(
        <div>
            <img src={imgUrl} alt="..."/>
        </div>
    )
}

1.3 可选：简化db路径 #

如果想省去路径替换步骤，可修改db.js中的路径为相对于media目录的格式：

img: "winterJacket/CGwinterJ_11.webp",
imgArray: ["winterJacket/CGwinterJ_12.webp", ...]

此时getImageUrl可以简化为：

export const getImageUrl = (relativePath) => {
    try {
        return imageContext(`./${relativePath}`);
    } catch (err) {
        console.error('图片路径不存在:', relativePath);
        return '';
    }
};

方法2：将图片放在public目录直接引用 #

如果用Create React App，可将图片移到public目录，直接通过绝对路径引用，无需导入。

2.1 移动图片 #

把所有图片放到public/media文件夹下。

2.2 修改db路径 #

改成基于public的绝对路径：

img: "/media/winterJacket/CGwinterJ_11.webp",
imgArray: ["/media/winterJacket/CGwinterJ_12.webp", ...]

2.3 组件直接使用 #

function Component(props){
    return(
        <div>
            <img src={props.img} alt="..."/>
        </div>
    )
}

这种方式最简便，但图片不会被Webpack压缩优化，适合对图片体积要求不高的场景。

方法3：修复异步导入写法 #

之前的异步导入错误在于直接把Promise作为src，需用状态管理加载后的图片URL：

import { useState, useEffect } from 'react';

function Component(props){
    const [imgUrl, setImgUrl] = useState('');

    useEffect(() => {
        async function loadImage() {
            try {
                // 固定前缀+动态路径，Webpack才能正确解析
                const img = await import(`../src/media/${props.img}`);
                setImgUrl(img.default);
            } catch (err) {
                console.error('加载图片失败:', err);
            }
        }
        loadImage();
    }, [props.img]);

    return(
        <div>
            {imgUrl && <img src={imgUrl} alt="..."/>}
        </div>
    )
}

注意：props.img需为相对于../src/media的路径，比如winterJacket/CGwinterJ_11.webp。

内容的提问来源于stack exchange，提问作者OmarAbouzeid95