React项目中图片无法加载的问题排查与解决求助

我尝试在Skills.js中从public目录下的文件夹导入图片，代码如下：

<div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
      {AllSkills.map((skill) => (
        <div key={skill} className="p-2 sm:w-1/2 w-full">
          <div className="bg-gray-800 rounded flex p-4 h-full items-center">
            <BadgeCheckIcon className="text-green-400 w-6 h-6 flex-shrink-0 mr-4" />
            <span className="title-font font-medium text-white">
              {skill.skill_name}
                <img alt="something"
                className=""
                src={require(skill.image)}>
                </img>
            </span>
          </div>
        </div>
      ))}
    </div>

调用的数组定义如下：

export const AllSkills = [ 
{
    skill_name:"React",
    image: "/react.png"
}
]

项目文件结构中图片位于public目录下，但无论如何调整路径，始终出现以下错误：

Uncaught Error: Cannot find module '/react.png'
at webpackEmptyContext (component|sync:2:1)
at Skills.js:27:1
at Array.map (<anonymous>)
at Skills (Skills.js:18:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)

我尝试添加file-loader处理png并配置webpack.config，但无效果；按照建议将"assets/images"文件夹从"src"移到"public"，也没有作用；甚至新建项目测试图片加载，同样失败，即使图片文件就在引用它的文件旁边。请问如何才能在React网页中正确引用并显示图片？

方法1：直接使用public目录路径（无需require） #

React中public目录下的资源可通过绝对路径直接访问，不需要用require。修改img标签的src属性：

<img alt="something" className="" src={skill.image} />

确保图片确实放在public根目录下（比如public/react.png），此时路径/react.png会直接指向该文件。

方法2：从src目录导入图片（推荐） #

若将图片放在src目录（比如src/assets/images/react.png），可通过静态导入的方式引用：

1. 修改数组定义，提前导入图片：

import ReactIcon from './assets/images/react.png';

export const AllSkills = [ 
{
    skill_name:"React",
    image: ReactIcon
}
]

2. 在组件中直接使用：

<img alt="something" className="" src={skill.image} />

这种方式会让Webpack在编译时正确处理图片资源，自动优化路径和打包。

方法3：动态加载public目录图片（适配变量场景） #

如果必须通过动态变量加载public目录的图片，不能直接用require(skill.image)（Webpack编译时无法解析动态路径），可拼接public根路径：

<img alt="something" className="" src={`${process.env.PUBLIC_URL}${skill.image}`} />

process.env.PUBLIC_URL会自动指向项目public目录的根路径，确保资源访问正确。

关键排查点 #

• 确认图片文件名、路径完全匹配（注意大小写，Linux/macOS系统区分文件名大小写）
• 检查public目录是否在项目根目录下，且未被webpack配置排除
• 不要在public目录资源中使用require，否则Webpack会从src目录查找资源，导致路径错误

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