React中如何正确将图片导入数组并在组件中展示

问题背景 #

我在项目里存了一些图片，希望用相对链接或数组引用的方式，把图片关联到对应的数组项中，最终在React组件里展示到网页上。尝试过直接写相对路径、导入单个图片变量、导入图片数组引用，但都没成功。

项目文件结构 #

• src
  • assets
    • data
      • project.js
      • projectImages.js
    • images
      • img.jpg
      • img2.jpg
      • img3.jpg
  • components
    • Project.jsx

当前代码 #

Project.jsx #

export default function Project({ project, theme }) {
  return (
    <div id="project">
      <h3 className="subheading">{project.name}</h3>
      <div>
        <img src={project.img}>
      </div>
    </div>
  );
}

project.js #

// import projectImages from '../data/projectImages' (尝试导入图片数组但无效)

module.exports = [
  {
    type: "",
    name: "",
    desc: "",
    tech: ["", "", "", ""],
    summary: "",
    year: ,
    img: '../data/images/img.jpg', // 尝试过用projectImages[0]
    link: "",
  },
  {
    ...
    img: '../data/images/img2.jpg', // 尝试过用projectImages[1]
    ...
  },
  {
    ...
    img: '../data/images/img3.jpg', // 尝试过用projectImages[2]
    ...
  },
]

尝试过的无效方法 #

• import img from '../assets/images/img.jpg'，无法在对象数组中使用该变量
• 将图片存入数组后引用，同样无效

正确解决步骤 #

1. 配置projectImages.js #

在src/assets/data/projectImages.js中导入所有图片并导出为数组：

// 注意路径：从projectImages.js到images文件夹的相对路径是../images/
import img1 from '../images/img.jpg';
import img2 from '../images/img2.jpg';
import img3 from '../images/img3.jpg';

export default [img1, img2, img3];

2. 修改project.js导入并引用图片数组 #

把project.js改为ES模块导出，导入projectImages后使用数组索引：

import projectImages from './projectImages';

export default [
  {
    type: "",
    name: "",
    desc: "",
    tech: ["", "", "", ""],
    summary: "",
    year: 2024, // 需填写具体年份，不能留空
    img: projectImages[0],
    link: "",
  },
  {
    // ...其他属性
    img: projectImages[1],
    // ...其他属性
  },
  {
    // ...其他属性
    img: projectImages[2],
    // ...其他属性
  },
];

3. 修复Project.jsx的img标签 #

React的JSX要求标签必须闭合，同时建议添加alt属性：

export default function Project({ project, theme }) {
  return (
    <div id="project">
      <h3 className="subheading">{project.name}</h3>
      <div>
        <img src={project.img} alt={project.name} />
      </div>
    </div>
  );
}

原理说明 #

在React（或Webpack/Vite等打包工具）中，图片资源需要通过import导入，打包工具会自动处理图片路径，生成编译后的正确路径。直接写字符串形式的相对路径会被当作普通文本，打包工具不会解析，导致图片无法加载。

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