Laravel项目使用Owl Carousel构建商品画廊时缩略图重复问题求助

云原生阿岚

2026-5-29

问题根源与修复方案

嘿，我一眼就发现问题所在了！你在缩略图画廊的foreach循环里犯了一个很容易忽略的小错误——你始终在引用主图的$product->image路径，而没有使用循环中当前迭代的额外图片$image变量。

错误代码片段（问题核心）

@foreach (json_decode($product->images, true) as $image)
<button class="owl-thumb-item">
  <img src="{{ productImage($product->image) }}" alt="product">
</button>
@endforeach

这里不管循环到哪一张额外图片，你都在调用productImage($product->image)（主图路径），所以缩略图自然会重复显示主图。

修正后的完整代码

<div class="product-images col-lg-6">
  <div data-slider-id="1" class="owl-carousel items-slider owl-drag">
    <div class="item">
      <img src="{{ productImage($product->image) }}" alt="product" id="currentImage">
    </div>
  </div>
  <div data-slider-id="1" class="owl-thumbs d-flex align-items-center justify-content-center">
    <button class="owl-thumb-item">
      <img src="{{ productImage($product->image) }}" alt="product">
    </button>
    @if ($product->images)
      @foreach (json_decode($product->images, true) as $image)
        <button class="owl-thumb-item">
          <img src="{{ productImage($image) }}" alt="product">
        </button>
      @endforeach
    @endif
  </div>
</div>

只需要把foreach循环里的productImage($product->image)改成productImage($image)，循环中的每一张额外图片就会加载对应的路径了。