Laravel产品多图条件展示实现及空值读取报错处理

问题背景 #

需求：实现条件判断，若产品在ProductImage表中有关联图片则展示图片，无关联图片时显示为空。

当前使用的Laravel Blade代码：

@foreach($products as $product)
<tr>
    <td>{{ $product->id }}</td>
    <td>{{ $product->name }}</td>
    <td class="text-center">
        <span class="badge rounded-pill text-bg-primary">
            {{ App\Models\Project\Ecommerce\ProductImage::where('product_id', $product->id)->count() }}
        </span>
    </td>
    <td>


        // mutli image Product //
        @if (!empty($product->images))
            <img src="{{ asset('Image/ProductImage/'. $product->images->pull('0')->image) }}" alt="{{ $product->title_image }}" class="object-fit-contain" width="50" height="50">
        @endif
        // end mutli image Product //


    </td>
</tr>
@endforeach

执行代码时出现错误：Attempt to read property "image" on null

错误原因 #

1. 使用$product->images->pull('0')会移除集合中的第一个元素，后续循环遍历产品时会导致原集合数据异常
2. 即便$product->images不为空，pull('0')仍可能返回null（比如集合结构不符合预期）
3. 未对取出的单个图片实例做空值校验，直接访问->image属性触发错误

解决方案 #

第一步：确认模型关联关系 #

确保Product模型已与ProductImage模型建立正确的一对多关联，在Product模型中添加：

public function images()
{
    return $this->hasMany(App\Models\Project\Ecommerce\ProductImage::class);
}

第二步：优化Blade模板代码 #

修改图片展示逻辑，增加多层空值判断，同时避免修改原集合：

@foreach($products as $product)
<tr>
    <td>{{ $product->id }}</td>
    <td>{{ $product->name }}</td>
    <td class="text-center">
        <span class="badge rounded-pill text-bg-primary">
            {{ $product->images->count() }}
        </span>
    </td>
    <td>
        // 多图产品展示 //
        @if($product->images->isNotEmpty())
            @php $firstImage = $product->images->first(); @endphp
            @if($firstImage && $firstImage->image)
                <img src="{{ asset('Image/ProductImage/'. $firstImage->image) }}" 
                     alt="{{ $product->title_image ?? $product->name }}" 
                     class="object-fit-contain" 
                     width="50" 
                     height="50">
            @endif
        @endif
        // 多图产品展示结束 //
    </td>
</tr>
@endforeach

优化说明 #

• 用$product->images->isNotEmpty()替代!empty()，更贴合Laravel集合的判断规范
• 使用first()替代pull('0')，不会修改原集合，避免后续循环出现数据错乱
• 增加$firstImage和$firstImage->image的双重空值判断，彻底杜绝“读取null属性”的错误
• 给alt属性设置默认值$product->name，提升页面的可访问性
• 直接调用关联关系的count()方法，替代手动查询数据库，性能更优

内容的提问来源于stack exchange，提问作者Mahmoud