图像不会在反应中加载

Question

我正在尝试通过此处从 Skills.js 的公用文件夹中的文件夹中导入图像：

 <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"
}

文件结构如下： FileStructureOfProject似乎无论我如何构建路径，我都会不断收到此错误：

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)

我已经尝试为 png 添加文件加载器（并添加 webpack.config 来这样做）。 没有效果。 根据一些来源的建议，我已将我的“assets/images”文件夹从“src”迁移到“public”。 一点效果都没有。 我什至尝试创建一个新项目只是为了添加这些图像。也没有任何效果。 即使我在引用 png 的文件旁边确实有图像文件，也不会这样做。

我该怎么做才能正确引用图像并将它们显示在反应 web 页面上？

Answer 1

你读过文档吗？

process.env.PUBLIC_URL + "/assets/images/react.png"