React类组件中动态设置图片src后静态svg资源无法加载如何解决

问题成因 #

• 语法错误：你当前代码中使用单引号包裹包含${}插值逻辑的路径，单引号不会解析模板插值，最终传入src的是包含${this.state.pictoNumber}字面量的错误路径。即便你替换为反引号正确完成路径插值，仍存在下一个问题。
• 构建工具静态资源处理限制：Webpack、Vite等现代前端构建工具仅会处理构建阶段可明确识别的静态资源引用。使用import静态导入指定SVG时，工具会在构建阶段将对应文件处理后输出到打包产物的静态资源目录，同时返回产物的实际可访问路径，因此可以正常加载。而动态拼接的路径是运行时才生成的，构建阶段工具无法识别你要引用的SVG资源，不会将对应文件打包到产物中；且你写的相对源码目录的路径，运行时是相对于当前页面URL解析，和源码目录结构完全不匹配，自然无法找到资源。

可行解决方法 #

• 方法1：使用公共静态目录存放资源
  将pictograms整个文件夹移动到项目的公共静态目录（Webpack项目对应public文件夹、Vite项目对应public文件夹），引用时直接写绝对路径即可：

  <FittedImage fit="auto" src={`/img/pictograms/${this.state.pictoNumber}.svg`} />
  

  公共目录下的资源不会被构建工具编译处理，会原样复制到产物根目录，绝对路径可以稳定访问。
• 方法2：提前批量导入所有需要的SVG资源
  构建阶段提前导入所有可能用到的SVG，运行时按编号取对应路径即可，示例代码：

  // 手动导入（适合SVG数量少的场景）
  const pictoMap = {
    1: require('../../assets/img/pictograms/1.svg'),
    2: require('../../assets/img/pictograms/2.svg'),
    // 其余编号按该格式补充
  }
  
  // Vite项目可以用import.meta.glob批量导入，无需手动写全所有路径
  // const pictoModules = import.meta.glob('../../assets/img/pictograms/*.svg', { eager: true })
  // const pictoMap = Object.fromEntries(
  //   Object.entries(pictoModules).map(([path, module]) => {
  //     const num = path.match(/\/(\d+)\.svg$/)[1]
  //     return [num, module.default]
  //   })
  // )
  

  组件内使用：

  <FittedImage fit="auto" src={pictoMap[this.state.pictoNumber]} />
  

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