Question

尝试制作一个简单的Bootstrap滑块，以处理通过Rails Active Storage存储的图像。

我将此代码和相关图像嵌入到公用文件夹中，效果很好：

 <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <img src="/images/portfolio/item-1.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-2.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-3.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-4.jpg" alt="" class="swiper-slide">
                </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-1.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-2.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-3.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-4.jpg);"></div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

我还有另一个相同的代码块，但是它遍历了模型中的图像。

  <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <% @myimages.each do |image| %>
                    <%= image_tag(image.sgimage.image, alt: '', class: 'swiper-slide') %>
                  <% end %>
                  </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <% @myimages.each do |thumb| %>
                  <div class="swiper-slide" style="background-image:url(<%= rails_blob_url(thumb.sgimage.image) %>)"></div>
                  <% end %>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

如果我只是使用顶级静态版本，它将起作用。如果同时嵌入，则两者都不起作用，静态画廊顶部的幻灯片会正确播放，画廊缩略图部分的幻灯片会正常显示，但与画廊顶部的图像不同步。

Rails版本的库顶部“滑动”可以，但是仅返回初始图像。拇指滑动正常，但又一次不同步（我认为这是由于有两个相似的块引用相同的js）。

因此，如果我只包括滑轨滑块，则拇指可以滑行，但主滑块完全不滑。

我怀疑我缺少帮助者或其他东西。我可以使用相对URL引用，而不使用服务器中包含完整路径的完整资产管道URL吗？

任何帮助表示赞赏。在此上浪费很多时间。

Answer 1

解决了！ ...不知道为什么，但这行得通。我只需要在“图库顶部”部分中使用<div>和具有静态高度的背景图像，而不是使用<%= image_tag() %>解决方案。

此处的代码：

 <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <% @myimages.each do |image| %>
                    <div class="swiper-slide" style="height: 200px; background-image:url(<%= rails_blob_url(image.sgimage.image) %>)"></div>
                  <% end %>
                </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <% @myimages.each do |thumb| %>
                    <div class="swiper-slide" style="background-image:url(<%= rails_blob_url(thumb.sgimage.image) %>)"></div>
                  <% end %>                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

导轨活动存储滑块

1 个答案: