如何在React组件中导入本地图片并存入ItemData数组？

方法一：直接导入单个图片文件 #

在ItemData文件顶部先导入目标本地图片，再将导入的变量赋值给数组里的img字段：

// 导入本地图片文件
import Image1 from './image/1.jpg';
import Image2 from './image/2.jpg';

export const Itemdata = [
    {
        img: Image2,
        title: "image2"
    },
    {
        img: Image1,
        title: "image1"
    }
];

方法二：使用require动态导入（适合批量场景） #

如果需要批量引入或动态指定图片路径，可通过require实现：

export const Itemdata = [
    {
        img: require('./image/2.jpg').default,
        title: "image2"
    },
    {
        img: require('./image/3.jpg').default,
        title: "image3"
    }
];

注意：在React+Webpack环境中，require返回的对象需取.default才能获取正确的图片资源路径。

组件中使用示例 #

将数组中的图片路径赋值给<img>标签的src属性即可：

{Itemdata.map(item => (
    <img key={item.title} src={item.img} alt={item.title} />
))}

关键注意点 #

• 确保图片路径相对于当前ItemData文件的位置是正确的
• 基于Create React App搭建的项目中，本地图片会被Webpack自动处理为静态资源路径，直接使用导入的变量即可

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