rails活动存储滑块

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)。

因此，如果我只包括rails滑块，拇指滑动可以，但主滑块根本不能滑动。

我怀疑我遗漏了一个帮手什么的。我是否可以使用相对URL引用，而不是使用服务器中包含完整路径的完整资源管道URL？

感谢您的帮助。在这上面浪费了很多时间。

Answer 1

解决了！...not当然是为什么，但是这个方法起作用了。我只需要在"Gallery-top“部分使用<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>