React+webpack2环境require数组导入本地图片失效但单import正常问题求助

问题原因 #

你遇到的问题由两个常见错误共同/单独导致：

• 核心语法错误：Math.random是JavaScript内置方法，必须加括号完成调用，你代码中的Math.random * images.length实际是将函数对象转换为数值，结果为NaN，使用NaN作为数组索引必然返回undefined，img标签传入undefined作为src自然无法加载图片。
• webpack2模块兼容问题：webpack2默认遵循ES模块规范，如果你配置的file-loader开启了esModule导出（默认开启），require()引入图片时拿到的是包裹了路径的{default: 图片路径}对象，而非直接的路径字符串；而import语法会自动解析default属性，所以单独import图片可以正常渲染，require取值时没有取default属性就会失效。

解决方案 #

第一步：先修复随机函数语法 #

将随机取数逻辑修改为：

const randomImg = () => {
  console.log(images);
  // 给Math.random添加调用括号
  const UU = images[Math.floor(Math.random() * images.length)];
  // 兼容ES模块导出的情况，优先取default属性，兜底返回UU本身
  return UU.default ?? UU;
}

修改后如果图片可以正常加载，说明仅为语法错误导致。

第二步：彻底解决模块兼容问题 #

如果第一步修改后仍有异常，直接将图片数组工具文件改为import语法导出，完全对齐你可用的单图导入逻辑，从根源避免require的兼容问题：

import img1 from "../assets/1.jpeg";
import img2 from "../assets/2.jpeg";
import img3 from "../assets/3.jpeg";
import img4 from "../assets/4.jpeg";
import img5 from "../assets/5.jpeg";
import img6 from "../assets/6.jpeg";

const images = [img1, img2, img3, img4, img5, img6];
export default images;

也可以修改webpack配置中file-loader的参数，关闭ES模块导出：

// webpack.config.js中对应rule的options添加如下配置
{
  loader: 'file-loader',
  options: {
    esModule: false
  }
}

改后require即可直接返回图片路径字符串，不需要额外取default属性。

内容的提问来源于stack exchange，提问作者lakshya 'Coding' Jain