本文详解如何在 laravel 项目中按分类（如 fabrikasi、konstruksi 等）精准筛选并渲染最多 10 张作品图，解决 `take(10)` 无效、分类混乱及第 11 张图不显示等问题。
在 Laravel 前端展示分类图片时，常见误区是：在 Blade 模板中对全量数据 $portfolios 进行条件循环 + $loop->iteration 限制——这会导致“每个分类仅取前 10 个出现位置”，而非“该分类下最新的 10 条记录”。例如，若数据库中 fabrikasi 类别仅有 3 条数据，且它们分散在 $portfolios 集合的第 2、第 15、第 28 位，则 $loop->iteration <= 10 仅匹配前 10 项，很可能完全跳过这些 fabrikasi 项，导致图片不显示。
✅ 正确做法是：在控制器中预先完成分类 + 分页/截取逻辑，为每个分类提供独立、已裁剪的数据集，再在 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，而是分别渲染各分类专属集合：
<!-- Fabrikasi Section -->
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
@foreach($fabrikasi as $portfolio)
<div class="col-lg-4 col-md-6 portfolio-item filter-fabrication">
<img src="{{ asset('storage/' . $portfolio->image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
<div class="portfolio-info">
<h4>{{ $portfolio->title }}</h4>
<p>{{ $portfolio->category }}</p>
<a href="{{ asset('storage/' . $portfolio->image) }}"
title="{{ $portfolio->title }}"
data-gallery="portfolio-gallery-fabrikasi"
class="glightbox preview-link">
<i class="bx bx-plus"></i>
</a>
</div>
</div>
@endforeach
</div>
<!-- Konstruksi Section -->
<div class="row portfolio-container">
@foreach($konstruksi as $portfolio)
<div class="col-lg-4 col-md-6 portfolio-item filter-construction">
<!-- 同上结构，仅 class 和 data-gallery 改为 konstruksi -->
</div>
@endforeach
</div>
<!-- 其他分类依此类推... -->⚠️ 关键注意事项
- 路径安全：确保图片路径正确。若使用 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 张图，新增作品自动进入对应分类顶部，且完全兼容前端滤镜交互。
立即学习“前端免费学习笔记（深入）”；
