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

聖光之護

发布时间：2026-02-03 10:50:12

453人浏览过

来源于php中文网

原创

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

本文详解如何在 laravel 中正确实现「按分类筛选并限制每类最多显示10张图片」的功能，解决因错误使用 `take(10)` 或 blade 中未按预查询数据遍历导致的图片不显示问题。

在构建作品集（Portfolio）类网站时，常需按「Fabrikasi」「Konstruksi」「Repair」「Lainnya」等分类分别展示精选内容，且每类严格限制为 10 张图片。你当前遇到的问题——新增第 11 张图片后，某分类（如 Fabrikasi）仅显示 3 张——根本原因在于：Blade 模板中仍遍历全部 $portfolios，却用 $loop->iteration 做全局计数，而非按分类独立计数。这导致即使某分类只有 3 条数据，$loop->iteration

✅ 正确解法是：控制器中预先按分类精准查询（已做对），Blade 中直接遍历对应变量，而非在全量集合中条件过滤。

✅ 推荐实现方式（清晰、高效、可维护）

1. 控制器保持优化查询（推荐使用 orderByDesc('created_at') 替代 latest() 避免隐式依赖）

public function landing()
{
    $numbers = Number::get();
    $testimonials = Testimonial::get();
    $clients = Client::get();

    // 每类精确取最新10条
    $fabrikasiPortfolios = Portfolio::where('category', 'fabrikasi')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    $konstruksiPortfolios = Portfolio::where('category', 'konstruksi')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    $repairPortfolios = Portfolio::where('category', 'repair')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    $lainnyaPortfolios = Portfolio::where('category', 'lainnya')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    return view('landing/landing', compact(
        'numbers', 'testimonials', 'clients',
        'fabrikasiPortfolios', 'konstruksiPortfolios',
        'repairPortfolios', 'lainnyaPortfolios'
    ));
}

⚠️ 注意：latest() 是 orderBy('created_at', 'desc') 的简写，但若模型未定义 CREATED_AT 常量或字段名非标准（如 date_posted），建议显式写 orderByDesc('created_at') 提高健壮性。

2. Blade 模板中 —— 只遍历对应变量，删除所有 @if($portfolio->category === ...) 分支逻辑



    @foreach($fabrikasiPortfolios as $portfolio)
        
            @@##@@image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
            
                {{ $portfolio->title }}
                fabrikasi
                
                    
                
            
        
    @endforeach




    @foreach($konstruksiPortfolios as $portfolio)
        
            @@##@@image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
            
                {{ $portfolio->title }}
                konstruksi

							
								
								
									Munch
									AI营销分析工具，长视频中提取出最具吸引力的短片
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；
                
                    
                
            
        
    @endforeach

✅ 关键优势：

✅ 性能优：避免 N+1 查询与全量遍历；
✅ 逻辑清：分类数据与视图结构一一对应，无嵌套判断；
✅ 可控强：每类严格 ≤10 条，不受其他分类数据量干扰；
✅ 易扩展：新增分类只需加一行查询 + 一个 Blade 区块。

❌ 避免的反模式：

不要在 Blade 中用 @foreach($portfolios) + 多层 @if($portfolio->category === ...) + $loop->iteration —— 这本质是「客户端分组」，既低效又易错；
不要省略 asset() 或 storage() 路径处理，确保图片 URL 可访问（示例中假设图片存于 storage/app/public/ 并已运行 php artisan storage:link）。