React中通过变量引入图片URL失效问题求助

这个问题我之前在项目里也踩过坑，核心原因其实是前端打包工具（比如Webpack、Vite）的静态资源解析机制在搞事情，下面给你拆解清楚：

为什么直接写字符串路径没问题，存变量就报错？ #

React项目默认用Webpack或Vite做打包，这类工具在编译阶段会扫描代码里的静态资源引用（比如import、require里的路径），提前把这些资源处理（压缩、重命名、打包到输出目录），然后替换成打包后的路径。

• 当你直接写死路径（比如<img src={require('./assets/avatar.png')} />），打包工具能明确找到这个文件，顺利完成资源处理；
• 但如果把路径存在变量里（比如const path = './assets/avatar.png'; <img src={require(path)} />），编译时工具没法确定这个变量最终指向的具体文件，它没办法提前打包对应的资源，就会抛出「Cannot find module "."」这类找不到模块的错误。

解决方法分这几种场景 #

场景1：已知所有需要用到的图片（固定数量） #

提前把所有图片导入，用一个映射对象管理，之后通过key来取路径：

// 先批量导入图片
import avatar from './assets/avatar.png';
import banner from './assets/banner.png';
import icon from './assets/icon.png';

// 建立路径映射
const imageMap = {
  avatar,
  banner,
  icon
};

// 使用时通过key获取
function App() {
  return <img src={imageMap['avatar']} alt="头像" />;
}

场景2：动态文件名（比如根据状态切换不同图片） #

可以用模板字符串+固定基础路径的方式写require，让打包工具能识别到资源所在的目录，提前打包该目录下的所有图片：

function App() {
  // 比如根据用户类型切换头像
  const userType = 'admin';
  // 注意：基础路径必须写死，变量只放在文件名部分
  return <img src={require(`./assets/${userType}-avatar.png`)} alt="用户头像" />;
}

这种写法下，Webpack会把./assets/目录下所有符合*-avatar.png规则的图片都打包，运行时根据变量匹配对应的资源路径。

场景3：图片放在public目录下 #

如果你的图片是放在项目根目录的public文件夹里，那可以直接用绝对路径拼接变量，因为public目录下的资源不会被打包工具处理，而是直接复制到输出目录，运行时可以直接访问：

function App() {
  const imgName = 'banner.png';
  // public目录对应的根路径是 /，所以直接从 / 开始写
  return <img src={`/assets/${imgName}`} alt="横幅" />;
}

额外补充：Vite项目的写法 #

如果你的React项目是用Vite构建的，需要换用new URL()的方式来处理动态路径：

function App() {
  const imgName = 'avatar.png';
  return <img src={new URL(`./assets/${imgName}`, import.meta.url).href} alt="头像" />;
}

Vite会通过import.meta.url来定位当前模块的位置，再结合相对路径找到对应的图片资源。

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