React数组存储本地图片路径循环渲染时无法加载如何解决

使用Webpack、Vite等构建工具搭建的React项目中，直接在JS/JSX文件里写字符串形式的本地相对路径赋值给img标签的src属性时，构建工具不会识别、处理这部分路径引用：既不会把对应图片资源打包到输出目录，也不会将路径替换为生产环境可访问的真实地址，最终导致图片加载失败。网络URL是独立的绝对地址，不需要经过构建工具处理，所以可以正常渲染。

你可以根据自己的项目场景选任意一种方案：

• 方案1：静态导入图片后引用（兼容性最好，所有React脚手架通用）
  在配置图片路径的文件顶部手动导入所有本地图片，构建工具会自动解析导入的资源并返回最终可访问的路径，直接把导入的变量赋值给image字段即可。修改后的Images.js代码如下：

  import img1 from "./img/img1.jpg";
  import img2 from "./img/img2.jpg";
  import img3 from "./img/img3.jpg";
  
  const Images = [
    {
      id: 1,
      image: img1
    },
    {
      id: 2,
      image: img2
    },
    {
      id: 3,
      image: img3
    }
  ];
  
  export default Images;
  

• 方案2：将图片放到public目录（适合图片数量较多的场景）
  如果你是用Create React App创建的项目，可以把存放图片的img文件夹直接移动到项目根目录的public文件夹下，之后图片路径直接以/开头写根路径即可，不需要写相对路径：

  const Images = [
    {
      id: 1,
      image: "/img/img1.jpg"
    },
    {
      id: 2,
      image: "/img/img2.jpg"
    },
    {
      id: 3,
      image: "/img/img3.jpg"
    }
  ];
  
  export default Images;
  

  这种方式的资源不会被构建工具做压缩、哈希重命名处理，会直接原路径对外提供访问。

• 方案3：使用URL构造函数批量生成路径（适合路径有统一规则的场景）
  如果你的图片命名有规律，可以用new URL()结合import.meta.url动态生成资源的真实访问路径，不需要挨个导入图片：

  const Images = [1, 2, 3].map(id => ({
    id,
    image: new URL(`./img/img${id}.jpg`, import.meta.url).href
  }));
  
  export default Images;
  

  注意：该方法在Webpack 4及更早版本中不支持，使用前请确认自己项目的构建工具版本。

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