Laravel（PHP）和Owl Carousel问题

Question

我正在尝试使用Owl Carousel为我的Laravel项目创建产品图库。存储在“图像”列下的数据库中的主图像在主图像和缩略图库中都显示得很好。目前，缩略图库不正确地重复填充“图像”列中的图像，此时应从“图像”列和“图像”列中的图像填充该图像。

我写过HTML / CSS / PHP /等。试图完成前面提到的，但我没有运气（再次，我只是继续从缩略图库中的“图像”列重复图像）。以下是适用的代码：

<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($product->image) }}" alt="product">
              </button>
            @endforeach
          @endif
        </div>
      </div>

脚本“我”写道：

<script>
  (function(){
    const currentImage = document.querySelector('#currentImage');
    const images = document.querySelectorAll('.owl-thumb-item');

    images.forEach((element) => element.addEventListener('click', thumbnailClick));

    function thumbnailClick(e) {
      currentImage.src = this.querySelector('img').src;
    }
  })();
</script>

关于我可能做错什么的任何建议？我尝试了故障排除，不同的变化，走开/回来，但没有运气。

Answer 1

在您的第二个productImage函数调用中，您传递的$product->image引用了您的主图像。你想只传递$image：

productImage($image)