React项目本地图片无法显示问题求助

问题背景 #

正在学习React，遇到图片加载异常：将book-2.jpg放置在项目public/images目录下，在组件中通过相对路径src='../images/book-2.jpg'引用，应用其他内容正常加载，但图片无法显示。

未手动配置webpack，使用的是vs-code-setup-2022仓库的配置。尝试过以下方案均无效：

• 使用绝对路径src='/images/book-2.jpg'
• 检查浏览器控制台，无404错误
• 尝试import导入：import picture from "../images/book-2.jpg"; <img src={picture}/>，触发报错：相对导入不能超出src目录
• 使用{require()}引用
• 保留原相对路径src='../images/book-2.jpg'

解决方向 #

1. 确认文件结构与文件名 #

确保项目根目录下的public/images文件夹存在，且book-2.jpg文件确实在其中，注意文件名大小写（Linux/macOS系统区分大小写，Windows不区分），避免因文件名拼写错误导致加载失败。

2. 正确引用public目录资源 #

React中public目录是静态资源的根路径，引用时需以/开头的绝对路径，代码修改如下：

const Image = () => (
  <img
    src='/images/book-2.jpg'
    alt='Friends, Lovers, and the Big Terrible Thing'
  />
)

修改后可通过浏览器开发者工具查看img元素的src属性，点击链接确认图片能否正常访问，验证路径是否正确。

3. 检查开发服务器配置 #

由于使用的是自定义配置的开发环境，需确认开发服务器是否将public目录设置为静态资源目录。如果是webpack-dev-server，需确保static选项指向public目录，示例配置：

// webpack.config.js
module.exports = {
  // ...其他配置
  devServer: {
    static: './public',
  },
};

4. 清除浏览器缓存 #

浏览器缓存可能导致旧资源覆盖新图片，可通过**强制刷新页面（Ctrl+Shift+R）**或清除浏览器缓存后重新加载应用。

5. 迁移图片到src目录（备选方案） #

若public目录的方式始终无法解决，可将images文件夹移至src目录下，通过import方式引用：

// 假设images文件夹在src目录下，路径根据实际结构调整
import bookImage from './images/book-2.jpg';

const Image = () => (
  <img
    src={bookImage}
    alt='Friends, Lovers, and the Big Terrible Thing'
  />
)

这种方式是Create React App推荐的资源引用方式，会由构建工具自动处理资源路径。

原问题代码 #

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'

const BookList = () => {
  return (
    <section className='booklist'>
      <Book />
      <Book />
      <Book />
      <Book />
    </section>
  )
}

const Book = () => {
  return (
    <article className='book'>
      <Image />
      <Title />
      <Author />
    </article>
  )
}

const Image = () => (
  <img
    src='../images/book-2.jpg'
    alt='Friends, Lovers, and the Big Terrible Thing'
  />
)
const Title = () => <h2>Friends, Lovers, and the Big Terrible Thing</h2>
const Author = () => {
  return <h4>Matthew Perry</h4>
}

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(<BookList />)

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