Laravel 11结合Inertia与React如何显示已存储的公开图片？

核心问题分析 #

浏览器仅能直接访问Laravel项目根目录下public文件夹内的资源，而你存储的图片位于storage/app/public/product_images，默认情况下该目录无法通过HTTP直接访问，需要通过软链接映射到public目录，同时后端需生成正确的可访问URL传给前端。

分步解决方案 #

1. 创建Storage软链接（Windows环境） #

在Windows命令提示符（CMD）中，以管理员身份运行以下命令，将storage/app/public映射到public/storage：

mklink /D "C:\wamp64\www\ecommerce\public\storage" "C:\wamp64\www\ecommerce\storage\app\public"

若使用Laravel Artisan命令，需确保终端以管理员权限运行：

php artisan storage:link

2. 后端生成正确的图片URL #

在返回Inertia页面的控制器中，为每张已存储的图片生成可访问的URL，传给前端：

// 示例：编辑页面控制器
use Illuminate\Support\Facades\Storage;
use Inertia\Inertia;

public function edit(Product $product)
{
    return Inertia::render('Products/Edit', [
        'product' => $product,
        'images' => $product->images->map(function ($image) {
            return [
                'id' => $image->id,
                'name' => $image->name,
                // 生成可访问的HTTP URL
                'url' => Storage::url("product_images/{$image->filename}"),
            ];
        }),
    ]);
}

验证：Storage::url()会生成类似http://localhost/ecommerce/storage/product_images/xxx.png的路径，确保.env文件中APP_URL=http://localhost/ecommerce配置正确。

3. 前端代码适配调整 #

确保前端能区分已存储图片（使用后端传入的url）和新上传的本地文件（使用URL.createObjectURL）：

<div className="mt-4">
  {images.map((image, index) => (
    <div
      key={image.id || index}
      className="flex items-center justify-between mb-2"
    >
      <div className="flex items-center">
        <img
          src={
            // 优先使用后端提供的已存储图片URL
            image.url ||
            // 处理新上传的本地文件/Blob
            (image instanceof File || image instanceof Blob
              ? URL.createObjectURL(image)
              : '')
          }
          alt={image.name || 'Product Image'}
          className="w-16 h-16 object-cover mr-4"
          // 可选：加载失败时显示占位图
          onError={(e) => {
            e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik04IDRMMTMuNSA5TDggMTRMMi41IDlMOSA0WiIgZmlsbD0iI0VCNDREQiIvPgo8L3N2Zz4K';
          }}
        />
      </div>
      <button
        type="button"
        className="text-red-500 hover:text-red-700 focus:outline-none"
        onClick={() => handleImageRemove(index)}
      >
        Delete
      </button>
    </div>
  ))}
</div>
{errors.length > 0 && (
  <div className="mt-4 text-red-600">
    {errors.map((error, index) => (
      <div key={index}>{error}</div>
    ))}
  </div>
)}

4. 验证访问路径 #

直接在浏览器地址栏输入图片的完整URL（如http://localhost/ecommerce/storage/product_images/gibson-lp-classic-20240717001924.png），若能正常显示，说明软链接和URL配置正确；若无法显示，检查：

• 软链接是否创建成功（查看public/storage是否指向正确的存储目录）
• 图片文件权限（Windows下确保文件夹有读取权限）
• filesystems.php中public磁盘的默认配置（无需修改，默认如下）：

  'public' => [
      'driver' => 'local',
      'root' => storage_path('app/public'),
      'url' => env('APP_URL').'/storage',
      'visibility' => 'public',
  ],
  

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