Laravel 存储的图片需通过 storage:link 创建软链接，并在数据库中保存相对路径（如 /storage/images/xxx.png），前端则拼接完整 URL（如 http://localhost:3000/storage/images/xxx.png）才能正常访问。
laravel 存储的图片需通过 `storage:link` 创建软链接，并在数据库中保存相对路径（如 `/storage/images/xxx.png`），前端则拼接完整 url（如 `http://localhost:3000/storage/images/xxx.png`）才能正常访问。
在 Laravel + React 全栈项目中，将用户上传的图片存入 storage/app/public/images/ 目录后，常遇到「图片路径存在、数据库记录正确，但 React 页面无法显示」的问题。根本原因在于：Laravel 的 storage 目录默认不对外公开，且 React 运行在独立服务（如 localhost:3000）下，无法直接访问本地文件系统路径（如 ../../../../../storage/images/xxx.png）。
✅ 正确做法分三步：
-
配置 Laravel 公共存储链接
在 Laravel 项目根目录执行命令，创建从public/storage到storage/app/public的符号链接：php artisan storage:link
✅ 执行后，所有存入
storage/app/public/下的文件（如images/logo.png）可通过https://your-laravel-app.com/storage/images/logo.png访问。 -
数据库中保存可路由的相对路径
上传时，应保存以/storage/开头的 Web 可达路径（非物理路径），例如：// Laravel 控制器中（上传逻辑示例） $path = $request->file('image')->store('images', 'public'); $item->image = '/storage/' . $path; // → 存入 "/storage/images/abc123.png" $item->save();⚠️ 确保该路径不包含
app/public/或绝对服务器路径，仅保留/storage/...格式。立即学习“前端免费学习笔记（深入）”；
-
React 前端拼接完整 URL 并安全使用
由于 React 应用通常部署在独立域名或端口（如http://localhost:3000），而图片由 Laravel 后端提供，因此必须显式构造完整 URL：useEffect(() => { axiosClient .get("/getItems") .then((response) => { setAllItem(response.data.items); }) .catch((err) => console.error("加载商品失败:", err)); }, []); {/* 渲染列表 */} {items.length > 0 && items.map((el) => ( <AllItem key={el.id} title={el.title} price={el.price} // ✅ 正确：拼接 Laravel 后端域名 + 数据库存储的路径 img={`${window.location.origin.replace(/:\d+/, ':8000')}/storage/${el.image.split('/storage/')[1]}`} // 更健壮写法（推荐）：后端统一返回完整 URL，或使用环境变量指定 API 域名 // img={`https://api.yoursite.com${el.image}`} /> ))}
? 关键注意事项：
- ❌ 避免在 React 中使用
../../../../../storage/...这类相对路径 —— 这是 Node.js 构建时路径，运行时无效； - ✅ 始终通过 HTTP 请求访问图片（即
https://backend-domain.com/storage/xxx.png），而非读取本地文件； - ? 若前后端跨域，确保 Laravel 的
config/filesystems.php中public磁盘配置'url' => env('APP_URL') . '/storage'，并设置APP_URL=http://localhost:8000； - ? 最佳实践：后端接口（如
/getItems）直接返回图片的完整可访问 URL 字段（如image_url: "https://api.example.com/storage/images/xxx.png"），前端直接使用，解耦路径逻辑。
完成以上配置后，图片即可在 React 页面中稳定、安全地渲染。
