ReactJS读取本地图片时出现Uncaught ReferenceError: require未定义错误求助

问题场景 #

尝试用require加载本地图片：

<img src={require('../images/Mobile/Grab & Go.png')} alt="" />

触发报错：

Portfolio.jsx:23 Uncaught ReferenceError: require is not defined

原因 #

当前React项目（比如基于Vite、Create React App 5+）默认采用ES模块规范，不再支持CommonJS的require语法，直接调用会导致未定义错误。

解决方法 #

方法1：静态导入图片

直接在组件顶部用ES模块的import导入图片资源，再在img标签中使用：

import grabAndGoImg from '../images/Mobile/Grab & Go.png';

// 组件内渲染
<img src={grabAndGoImg} alt="Grab & Go" />

方法2：动态加载图片（按需加载场景）

如果需要根据变量动态切换图片，使用ES模块的动态导入import()函数：

import { useState, useEffect } from 'react';

const Portfolio = () => {
  const [imgSrc, setImgSrc] = useState('');

  // 封装动态加载函数
  const loadImage = async (imagePath) => {
    const imageModule = await import(`../images/Mobile/${imagePath}`);
    return imageModule.default;
  };

  useEffect(() => {
    // 加载目标图片
    loadImage('Grab & Go.png').then(src => setImgSrc(src));
  }, []);

  return <img src={imgSrc} alt="Grab & Go" />;
};

export default Portfolio;

方法3：兼容旧版Webpack（不推荐）

如果你的项目基于旧版Webpack，且必须使用require，需要确保Webpack配置中配置了file-loader或url-loader处理图片资源，同时确认Babel配置支持CommonJS语法，但更建议迁移到ES模块规范的写法。

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