如何在前端按分类动态展示指定数量的图片（如每类10张）

本文详解如何在 laravel 项目中正确实现“按分类（如 fabrikasi、konstruksi 等）分别获取并展示最多 10 张作品图”，解决因错误使用 `take(10)` 或循环逻辑缺陷导致的图片不显示问题。

在构建企业官网或作品集页面时，常需将作品（Portfolio）按业务类别（如“Fabrikasi”“Konstruksi”“Repair”“Lainnya”）分组展示，并严格限制每类仅显示最新 10 张图。你当前遇到的问题——take(10) 在控制器中看似生效，但在 Blade 中仍无法正确渲染对应分类的图片（例如新增第 11 张 fabrikasi 图后，该分类反而只显示 3 张），根本原因在于：你在 Blade 中仍遍历了全部 $portfolios，却用 $loop->iteration 错误地判断全局序号，而非当前分类内的序号——这会导致“只要总序号超过 10，后续所有分类图片均被跳过”。

✅ 正确做法是：控制器按分类预查询、预截取；Blade 中直接遍历对应分类集合。

✅ 控制器优化（推荐简洁写法）

避免重复书写多个 where()->latest()->take(10)->get()，可统一处理：

// app/Http/Controllers/LandingController.php public function landing() {     $numbers = Number::get();     $testimonials = Testimonial::get();     $clients = Client::get();      // 定义分类映射（数据库中 category 字段值 → 前端 class 过滤器名）     $categories = [         'fabrikasi'   => 'filter-fabrication',         'konstruksi'  => 'filter-construction',         'repair'      => 'filter-repairs',         'lainnya'     => 'filter-design',     ];      // 预加载各分类的前 10 条最新作品     $portfoliosByCategory = [];     foreach ($categories as $dbValue => $filterClass) {         $portfoliosByCategory[$dbValue] = Portfolio::where('category', $dbValue)             ->latest('created_at') // 明确按 created_at 排序（避免无索引字段歧义）             ->take(10)             ->get();     }      return view('landing/landing', compact(         'numbers', 'testimonials', 'clients',         'portfoliosByCategory'     )); }

✅ Blade 模板正确渲染方式

不再遍历 $portfolios 全集，而是分别渲染每个预处理好的分类集合：

立即学习“前端免费学习笔记（深入）”；

   
All
   
Fabrikasi
   
Konstruksi
   
Repair
   
Lainnya
 
   
      @foreach($portfoliosByCategory['fabrikasi'] as $portfolio)     
       @@##@@image) }}" class="tuc-19bc10f7-99dbfd-0 img-fluid tuc-19bc10f7-99dbfd-0" alt="{{ $portfolio->title }}">       
{{ $portfolio->title }}
       
{{ $portfolio->category }}
       image) }}"          title="{{ $portfolio->title }}"          data-gallery="portfolio-gallery-fabrikasi">View     
   @endforeach       @foreach($portfoliosByCategory['konstruksi'] as $portfolio)     
       @@##@@image) }}" class="tuc-19bc10f7-99dbfd-0 img-fluid tuc-19bc10f7-99dbfd-0" alt="{{ $portfolio->title }}">       
{{ $portfolio->title }}
       
{{ $portfolio->category }}
       image) }}"          title="{{ $portfolio->title }}"          data-gallery="portfolio-gallery-konstruksi">View     
   @endforeach       @foreach($portfoliosByCategory['repair'] as $portfolio)     
       @@##@@image) }}" class="tuc-19bc10f7-99dbfd-0 img-fluid tuc-19bc10f7-99dbfd-0" alt="{{ $portfolio->title }}">       
{{ $portfolio->title }}
       
{{ $portfolio->category }}
       image) }}"          title="{{ $portfolio->title }}"          data-gallery="portfolio-gallery-repair">View     
   @endforeach       @foreach($portfoliosByCategory['lainnya'] as $portfolio)     
       @@##@@image) }}" class="tuc-19bc10f7-99dbfd-0 img-fluid tuc-19bc10f7-99dbfd-0" alt="{{ $portfolio->title }}">       
{{ $portfolio->title }}
       
{{ $portfolio->category }}
       image) }}"          title="{{ $portfolio->title }}"          data-gallery="portfolio-gallery-lainnya">View     
   @endforeach 

⚠️ 关键注意事项

• 路径安全：确保 $portfolio->image 存储的是相对路径（如 uploads/portfolio/abc.jpg），并在 Blade 中用 asset() 生成完整 URL；若为绝对 URL，请直接输出。
• 排序可靠性：->latest() 默认按 updated_at 排序，建议显式使用 ->latest(‘created_at’) 并确保该字段有数据库索引。
• 空分类容错：可在 @foreach 外加 @if($portfoliosByCategory[‘fabrikasi’]->count()) 判断是否为空，提升健壮性。
• 性能优化：如分类较多或数据量大，可考虑使用 Eloquent 的 when() + 单次查询 + php 分组，但当前 4 类 × 10 条完全适用预查询方案。

通过以上重构，每类作品严格展示最新 10 条，且新增作品后自动更新展示内容，彻底规避因循环逻辑错误引发的“图片消失”问题。