React JS中使用default规则导入图片失败该如何解决

这个加载异常核心是不同构建环境下，CommonJS 规范require()引入静态资源的返回结构不统一导致的：

• 老版本构建工具（Webpack4及更早、配置了esModule: false的url-loader/file-loader）中，require(图片路径)会直接返回图片打包后的可访问URL字符串，不存在.default字段。这时候强行取.default拿到的是undefined，img标签src为空自然渲染失败。
• 新版构建工具（Webpack5、CRA4+、Vite）默认对静态资源启用ES Module处理，require(图片路径)会返回一个模块对象，实际的资源URL存在.default字段上，这时候不取.default也会拿错值。
• 另外动态路径拼接写法如果路径前缀存在变量，构建工具无法扫描到对应目录下的资源，会导致图片根本没被打包进产物，就算路径逻辑正确也加载不出来。

按稳妥程度从高到低提供三个可直接落地的方案：

方案1：兼容两种返回格式，适配所有构建环境 #

直接对require的返回值做兼容处理，不管是直接返回字符串还是返回ES模块对象都能正确拿到URL：

<img
  className="bullet-logo"
  src={
    (() => {
      const res = require(`../../assets/Resume/${bullet.logoSrc}`)
      return res.default || res
    })()
  }
  alt="B"
/>

方案2：静态资源映射表（最稳妥，零兼容问题） #

如果Resume目录下的logo资源是固定的，不要用动态拼接require的写法，提前把所有资源导入建立映射，构建工具可以100%识别到要打包的资源，不会出现漏打包、路径匹配错误的问题：

// 组件顶部建立logo映射，key和bullet.logoSrc的取值保持一致
const logoSrcMap = {
  'tencent.png': require('../../assets/Resume/tencent.png'),
  'alibaba.png': require('../../assets/Resume/alibaba.png'),
  // 按实际用到的logo补全即可
}

// 渲染时直接取值
<img
  className="bullet-logo"
  src={logoSrcMap[bullet.logoSrc].default || logoSrcMap[bullet.logoSrc]}
  alt="B"
/>

方案3：使用原生URL构造方法替代require #

如果你的项目支持import.meta.url（CRA5、Vite、Webpack5原生支持），可以直接用标准URL语法获取资源地址，完全规避require的default属性问题：

<img
  className="bullet-logo"
  src={new URL(`../../assets/Resume/${bullet.logoSrc}`, import.meta.url).href}
  alt="B"
/>

注意：用动态路径拼接加载资源时，路径中指向目录的前缀部分必须是写死的静态字符串，不能用变量拼接，否则构建工具无法定位资源所在目录，会直接导致资源打包失败。

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