React项目中图片无法显示的问题求助

我刚开始学习React，搭建了一个静态HTML页面，其他内容都能正常运行，但唯独React logo图片无法显示。图片是从public文件夹复制过来的，但在浏览器里看不到。以下是我的代码和相关截图：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    
    <script src="index.js"></script>
  </body>
</html>

JS代码 #

import React from "react"
import ReactDOM from "react-dom/client"

const page = (
  <div>
    <img src="first-project/public/logo512.png" width="40px"/>
    <h1>Fun facts about React</h1>
    <ul>
      <li>Was released in 2013</li>
      <li>Was originally created by Jordan Walke</li>
      <li>Has well over 100k stars on Github</li>
      <li>Is maintained by facebook</li>
      <li>Powers thousands of enterprise apps, including mobile apps</li>
    </ul>
  </div>
)

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(page)

网页显示效果 #

IDE文件结构 #

问题原因与解决方法 #

问题出在图片路径配置错误。Create React App中，public文件夹是静态资源的根目录，部署后会直接映射到网站根路径，不需要额外添加项目或文件夹前缀。以下是三种可行的修复方案：

方案一：使用根相对路径 #

直接引用public文件夹下的图片，路径以/开头：

<img src="/logo512.png" width="40px"/>

方案二：通过import引入图片 #

利用Webpack的资源处理能力，直接import图片文件，自动生成正确路径：

import React from "react"
import ReactDOM from "react-dom/client"
import logo from "./public/logo512.png" // 根据实际文件层级调整相对路径

const page = (
  <div>
    <img src={logo} width="40px"/>
    // 其余内容保持不变
  </div>
)

root.render(page)

方案三：使用PUBLIC_URL环境变量 #

在JSX中通过process.env.PUBLIC_URL获取public文件夹的部署路径：

<img src={`${process.env.PUBLIC_URL}/logo512.png`} width="40px"/>

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