React 17.0.2版本动态设置img src路径图片不显示如何解决？

• React 17通常会配套升级webpack 5等新一代构建工具，这类工具的静态资源处理逻辑有两个变化会导致你的代码失效：
  1. 静态资源默认采用ES模块规范导出，require() 会返回一个模块对象，真实资源路径挂载在 default 属性下，旧版本构建工具默认用CommonJS规范导出，直接require()就返回路径
  2. 打包阶段的静态资源分析逻辑更严格，纯动态拼接的路径无法被识别，会导致打包时漏处理对应资源

方案1：补全default属性（优先尝试） #

如果只是导出规范变化的问题，直接在require后加.default即可修复，修改后代码如下：

<img src={require(`../${config.path}/${config.icon}`).default} alt='App Icon' />

方案2：提前建立资源映射表 #

如果动态路径无法被打包工具识别，可以提前把所有可能用到的图标引入，存入映射对象中再调用：

// 提前引入所有可能用到的图标，建立路径-资源的映射
const iconMap = {
  "pathA/icon1.png": require("../pathA/icon1.png"),
  "pathB/icon2.png": require("../pathB/icon2.png"),
  // 按需补全所有资源的映射关系
}

// 调用时直接从映射表取值
<img src={iconMap[`${config.path}/${config.icon}`]} alt='App Icon' />

方案3：使用public目录托管资源 #

如果图标数量多、路径变化灵活，可以把所有图标文件夹移动到项目的public目录下，直接用绝对路径引用，不需要经过webpack的require处理：

<img src={`${process.env.PUBLIC_URL}/${config.path}/${config.icon}`} alt='App Icon' />

方案4：修改构建配置（不推荐） #

可以在webpack配置中关闭静态资源的ES模块导出规则，对应配置参考：

// webpack.config.js 对应rule配置
{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource',
  generator: {
    esModule: false
  }
}

该方案会修改全局静态资源处理规则，可能对其他依赖产生影响，非必要不建议使用。

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