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

本文详解如何在 laravel 项目中按分类（如 fabrikasi、konstruksi 等）精准筛选并渲染最多 10 张作品图，解决 `take(10)` 无效、分类混乱及第 11 张图不显示等问题。

在 laravel 前端展示分类图片时，常见误区是：在 Blade 模板中对全量数据 $portfolios 进行条件循环 + $loop->iteration 限制——这会导致“每个分类仅取前 10 个出现位置”，而非“该分类下最新的 10 条记录”。例如，若数据库中 fabrikasi 类别仅有 3 条数据，且它们分散在 $portfolios 集合的第 2、第 15、第 28 位，则 $loop->iteration

✅ 正确做法是：在控制器中预先完成分类 + 分页/截取逻辑，为每个分类提供独立、已裁剪的数据集，再在 Blade 中直接遍历对应变量。

✅ 推荐控制器写法（优化 & 可维护）

public function landing() {     $numbers = Number::get();     $testimonials = Testimonial::get();     $clients = Client::get();      // 定义分类映射，避免重复代码     $categories = ['fabrikasi', 'konstruksi', 'repair', 'lainnya'];     $portfoliosByCategory = [];      foreach ($categories as $category) {         $portfoliosByCategory[$category] = Portfolio::where('category', $category)             ->latest('created_at') // 明确按创建时间倒序（推荐显式指定字段）             ->take(10)             ->get();     }      return view('landing/landing', compact(         'numbers', 'testimonials', 'clients',         ...$portfoliosByCategory // php 8.0+ 解构赋值；低版本可用 array_merge + compact     )); }

? 提示：->latest() 默认基于 created_at，但若字段名不同（如 published_at），请显式写为 ->latest(‘published_at’)，避免隐式行为失效。

✅ Blade 模板正确渲染方式

不再遍历 $portfolios，而是分别渲染各分类专属集合：

     @foreach($fabrikasi as $portfolio)         
             @@##@@image) }}" class="tuc-19bc10f7-033830-0 img-fluid tuc-19bc10f7-033830-0" alt="{{ $portfolio->title }}">             
                 
{{ $portfolio->title }}
                 
{{ $portfolio->category }}
立即学习“前端免费学习笔记（深入）”；
                 image) }}"                    title="{{ $portfolio->title }}"                    data-gallery="portfolio-gallery-fabrikasi">                                                   
         
     @endforeach 
   
     @foreach($konstruksi as $portfolio)         
                      
     @endforeach 

⚠️ 关键注意事项

• 路径安全：确保图片路径正确。若使用 Storage::disk(‘public’)，请通过 asset(‘storage/xxx.jpg’) 访问，且已执行 php artisan storage:link。
• 数据一致性：检查数据库中 category 字段值是否严格匹配控制器查询值（如 ‘fabrikasi’ vs ‘fabrication’），大小写与拼写必须完全一致。
• 前端过滤器兼容性：你使用的 data-Filter=”.filter-fabrication” 需与 html 元素的 class=”filter-fabrication” 对应。确保每个作品项的 class 包含对应分类过滤器类（如 filter-fabrication, filter-construction），否则 js 插件（如 Isotope）无法正确筛选。
• 性能优化（进阶）：若分类较多或数据量大，可改用 when() 动态构建查询，或使用 Eloquent 的 groupBy() + limit()（需配合子查询或窗口函数，Laravel 9+ 支持更好）。

✅ 总结

问题根源在于「逻辑层（PHP）未真正分离数据」，而试图在视图层用循环索引强行截断——这是反模式。真正的解耦是：控制器负责数据准备（按需裁剪），视图只负责呈现。按本文方式重构后，每类稳定显示最新 10 张图，新增作品自动进入对应分类顶部，且完全兼容前端滤镜交互。