Laravel使用eager loading加载数据库图片报404如何解决

1. 先修复storage目录访问配置（基础404问题） #

• Laravel默认不允许外部直接访问storage目录下的文件，需要先创建软链接，将对外可访问的public/storage路径映射到实际存储文件的storage/app/public目录，在项目根目录执行以下命令：

php artisan storage:link

• 如果执行命令提示链接已存在，先手动删除项目public目录下的storage快捷方式，再重新执行上述命令即可。
• 确认你上传的图片实际存储在storage/app/public目录下，只有存入public磁盘的文件才能通过storage/文件路径的形式访问。

2. 修复模型关联定义错误 #

• ProductImage模型中的反向关联外键配置错误，原代码写的关联主键是id，实际应该关联商品表的外键product_id，修正后代码：

// ProductImage模型
public function product()
{
  return $this->belongsTo(Product::class, 'product_id', 'id');
}

如果你的表字段完全符合Laravel默认命名规范，关联定义的外键、主键参数可以省略不写。

3. 修复控制器预加载逻辑 #

• 原控制器分两次查询Product数据属于冗余写法，直接一次查询同时预加载两个关联即可，删掉多余的图片查询逻辑：

public function homeProduct(){
  // 一次性预加载商品分类、商品图片两个关联
  $products = Product::with(['productCategory', 'productImage'])->get();
  return view('home.index', compact('products'));
}

4. 修复视图层循环逻辑（核心报错原因） #

• 原视图逻辑有两个致命问题：一是内层循环遍历的是商品模型集合，不是图片模型集合，根本读不到图片的path字段，导致拼接出的路径是/storage/（后面为空）直接触发404；二是所有轮播组件共用同一个id，多商品场景下轮播功能会失效。修正后的视图代码：

@foreach ($products as $p)
    <div class="col-lg-6 col-12">
       <div class="portfolio-thumb mb-5" data-aos="fade-up">
          {{-- 拼接商品id保证轮播id全局唯一 --}}
          <div id="yoreBeans-{{ $p->id }}" class="carousel slide" data-bs-ride="carousel">
             <div class="carousel-inner">
                {{-- 直接遍历当前商品关联的图片，不用全局查询 --}}
                @foreach ($p->productImage as $key => $image)
                   <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                      <a href="{{ asset('storage/'.$image->path) }}" class="image-popup">
                         <img src="{{ asset('storage/'.$image->path) }}" class="img-fluid portfolio-image" alt="">
                      </a>
                    </div>
                @endforeach
              </div>
             </div>
         <div class="portfolio-info">
             <h3 class="text-black">{{ $p->name }}</h3>
             <h4 class="text-danger">{{ $p->productCategory->name }}</h4>
         </div>
      </div>
   </div>
@endforeach

修正完成后清除路由和视图缓存即可生效，执行命令php artisan optimize:clear。

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