如何在前端按分类动态展示指定数量的图片（如每类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="img-fluid" alt="{{ $portfolio->title }}">
      
{{ $portfolio->title }}
      
{{ $portfolio->category }}

							

								
								

									Shop7z网上购物系统时尚版
									
Shop7z商城系统时尚版支持支付宝、微信支付等多种常用接口，电脑版与手机版与APP无缝结合数据一体!支持图片批量上传，一次性可上传任意张图片，支持多种在线支付接口，如支付宝、网银在线、财付通等接口，支持多级商品分类划分功能，可以方便的划分各商品类别的上下级关系，支持新订单邮件自动通知功能，支持单商品多分类展示功能，订单方面设计完美，如支持订单模糊查询、订单状态的编辑及打印等功能，灵活的导航可以设
								
								下载 
							
						
      View
    
  @endforeach

  
  @foreach($portfoliosByCategory['konstruksi'] as $portfolio)
    

      @@##@@image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
      
{{ $portfolio->title }}
      
{{ $portfolio->category }}
      View
    
  @endforeach

  
  @foreach($portfoliosByCategory['repair'] as $portfolio)
    

      @@##@@image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
      
{{ $portfolio->title }}
      
{{ $portfolio->category }}
      View
    
  @endforeach

  
  @foreach($portfoliosByCategory['lainnya'] as $portfolio)
    

      @@##@@image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
      
{{ $portfolio->title }}
      
{{ $portfolio->category }}
      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 条，且新增作品后自动更新展示内容，彻底规避因循环逻辑错误引发的“图片消失”问题。