Lara vel 存储的图片需通过 storage:link 创建软链接，并在数据库中保存相对路径（如 /storage/images/xxx.png），前端则拼接完整 URL（如 http://localhost:3000/storage/images/xxx.png）才能正常访问。

在 Lara vel 里，图片要能被正常访问，通常得先通过 `storage:link` 建立软链接；同时，数据库里保存的也应是相对路径，比如 `/storage/images/xxx.png`。到了前端这一层，再把它拼成完整的访问地址，例如 `http://localhost:3000/storage/images/xxx.png`，这样图片才能顺利加载出来。

在 Lara vel + React 的全栈项目里，图片上传到 storage/app/public/images/ 之后，经常会碰到这样一种情况：路径明明有，数据库记录也没问题，可到了 React 页面里，就是显示不出来。问题的根子其实很明确：Lara vel 的 storage 目录默认并不是对外开放的，而 React 又跑在独立服务中，比如 localhost:3000，它根本没法直接去访问本地文件系统路径，像 ../../../../../storage/images/xxx.png 这样的地址自然也就无法正常加载。

正确做法分三步：

1. 配置 Lara vel 公共存储链接
   在 Lara vel 项目根目录执行命令，创建从 public/storage 到 storage/app/public 的符号链接：

   php artisan storage:link

   执行后，所有存入 storage/app/public/ 下的文件（如 images/logo.png）可通过 https://your-lara vel-app.com/storage/images/logo.png 访问。

2. 数据库中保存可路由的相对路径
   上传时，应保存以 /storage/ 开头的 Web 可达路径（非物理路径），例如：

   // Lara vel 控制器中（上传逻辑示例）
   $path = $request->file('image')->store('images', 'public');
   $item->image = '/storage/' . $path; // → 存入 "/storage/images/abc123.png"
   $item->sa ve();

   确保该路径不包含 app/public/ 或绝对服务器路径，仅保留 /storage/... 格式。

3. React 前端拼接完整 URL 并安全使用
   由于 React 应用通常部署在独立域名或端口（如 http://localhost:3000），而图片由 Lara vel 后端提供，因此必须显式构造完整 URL：

   useEffect(() => {
   axiosClient
   .get("/getItems")
   .then((response) => {
   setAllItem(response.data.items);
   })
   .catch((err) => console.error("加载商品失败:", err));
   }, []);
   
   {/* 渲染列表 */}
   {items.length > 0 &&
   items.map((el) => (
   
   ))}

关键注意事项：

• 避免在 React 中使用 ../../../../../storage/... 这类相对路径 —— 这是 Node.js 构建时路径，运行时无效；
• 始终通过 HTTP 请求访问图片（即 https://backend-domain.com/storage/xxx.png），而非读取本地文件；
• 若前后端跨域，确保 Lara vel 的 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 页面中稳定、安全地渲染。

《夸克》非常好用的免费AI浏览器

下载APP查看