React中如何通过基础路径批量引用SVG图片？

可以实现，但不能直接用纯字符串拼接（webpack打包时无法识别这类路径），以下是几种可行方案：

方案1：使用require动态引入（webpack环境通用） #

利用webpack对require路径的解析能力，通过模板字符串拼接路径：

// 注意：basePath的相对路径要和当前组件文件位置对应
const baseImgPath = '../assets/img/';

// 在组件渲染中使用
return (
  <div>
    <img src={require(`${baseImgPath}icon-home.svg`)} alt="首页图标" />
    <img src={require(`${baseImgPath}icon-setting.svg`)} alt="设置图标" />
  </div>
);

方案2：将SVG放到public目录，直接用绝对路径拼接 #

把SVG文件移到项目根目录的public/assets/img下，就可以直接用绝对路径拼接：

const baseImgPath = '/assets/img/';

return (
  <div>
    <img src={`${baseImgPath}icon-home.svg`} alt="首页图标" />
    <img src={`${baseImgPath}icon-setting.svg`} alt="设置图标" />
  </div>
);

这种方式的资源不会被webpack打包优化，适合简单场景。

方案3：配置webpack别名（推荐，更优雅） #

在webpack配置文件中添加资源路径别名：

const path = require('path');

module.exports = {
  // 其他配置...
  resolve: {
    alias: {
      '@img': path.resolve(__dirname, 'src/assets/img/')
    }
  }
};

如果用TypeScript，还需要在tsconfig.json中补充路径配置：

{
  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@img/*": ["src/assets/img/*"]
    }
  }
}

之后在组件中就可以这样用：

return (
  <div>
    <img src={require('@img/icon-home.svg')} alt="首页图标" />
    <img src={require('@img/icon-setting.svg')} alt="设置图标" />
  </div>
);

为什么纯字符串拼接不行？ #

React项目依赖webpack打包时，静态资源的路径会被webpack重新处理（比如添加哈希后缀、输出到dist的指定目录），纯字符串路径webpack无法识别，最终会导致图片加载失败，必须通过require或动态import让webpack解析到对应的资源文件。

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