React Vite项目中图片无法加载的问题求助

原因分析 #

React 项目中，public 文件夹的资源会被直接部署到应用根目录，而 import 语法仅能解析 src 目录下的文件，这是你遇到问题的核心原因：

• 直接写 ./public/leaves.jpg，打包后实际路径不存在，导致图片加载失败
• 用 import 从 ./public/leaves.jpg 导入，因为 public 不在 import 的解析范围内，所以提示文件找不到

正确方案 #

方案一：直接使用 public 文件夹的根路径引用 #

修改 App.jsx 中的 img 标签，去掉 ./public 前缀，直接写根路径：

function App() {
  return (<img src="/leaves.jpg" alt="img" />)
}

方案二：将图片移到 src 目录后通过 import 引用 #

1. 在 src 目录下创建 assets 文件夹，把 leaves.jpg 移进去（路径：src/assets/leaves.jpg）
2. 修改 App.jsx 代码：

import leaves from './assets/leaves.jpg';

function App() {
  return (<img src={leaves} alt="img" />)
}

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