Laravel商品后台上传的图片无法在前端商品主页面显示如何解决

问题核心原因 #

1. 数据库product表存储的图片名称与public/imagg目录下的真实文件名不匹配：工厂生成的测试数据为不带后缀的digital_数字格式，而真实上传时Laravel默认会将文件重命名为时间戳格式，且你没有将上传生成的真实文件名同步存入数据库。
2. 前后端图片渲染路径不统一，或存储目录权限不足。

分步解决方法 #

1. 修正上传逻辑，同步保存真实文件名到数据库 #

Laravel 上传时自动重命名为时间戳是默认的防重名机制，你需要在上传代码中将生成的真实文件名写入product表的image字段，参考代码：

if ($request->hasFile('image')) {
    // 将文件存储到 public/imagg 目录，返回带目录的完整路径
    $imagePath = $request->file('image')->store('imagg', 'public');
    // 提取纯文件名
    $imageName = basename($imagePath);
    // 存入数据库
    $product->image = $imageName;
    $product->save();
}

如果直接存储到public目录而非storage目录，可使用以下代码：

if ($request->hasFile('image')) {
    $file = $request->file('image');
    $imageName = time().'.'.$file->getClientOriginalExtension();
    $file->move(public_path('imagg'), $imageName);
    $product->image = $imageName;
    $product->save();
}

2. 修正工厂测试数据格式 #

你的工厂生成的图片名缺少后缀，需要补充和本地文件一致的后缀，确保测试数据可正常访问：

'image' => 'digital_'.$this->faker->unique()->numberBetween(1,22).'.png'

3. 统一前后端图片渲染逻辑 #

前端页面使用和后台完全一致的路径生成方式即可：

<img src="{{ asset('imagg/'.$product->image) }}" width="60" alt="商品图片">

如果使用storage磁盘存储，渲染路径修改为：

<img src="{{ asset('storage/imagg/'.$product->image) }}" width="60" alt="商品图片">

同时记得执行命令创建storage到public的软链接：
php artisan storage:link

4. 检查目录权限（Linux 环境） #

确保public/imagg或storage/app/public/imagg目录有web服务器的读取权限：
sudo chmod -R 755 public/imagg

5. 快速排查方法 #

右键前端无法显示的图片，复制图片地址，直接在浏览器地址栏访问，对比后台可正常显示的图片地址，可快速定位路径错误问题。 #

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