如何将 image_tag 与 srcset 和活动存储变体一起使用？

Question

我想将 image_tag srcset 属性与活动存储变体一起使用

    <%= image_tag(@assoc.photo,
    srcset:[
      [@assoc.photo.variant(resize: "600x600"), "1024w"],
      [@assoc.photo.variant(resize: "800x800"), "1980w"]
      ],
      sizes: "100vw") %>

第一行return: 没有将Symbol 隐式转换为Integer。

怎么了？

Answer 1

尝试将 @assoc.photo.variant(resize: "600x600") 换成 url_for。

作为旁注，我发现这种定义宽度而不是面向分辨率的 1x、1x 方法的 srcset 将在您调整 window 大小时导致大量服务器调用。在 Rails 文档中未发现任何有关此行为的信息。

Answer 2

我做了一个调整照片大小的方法：

  def photos_variants(photo, width, height)
    variation = ActiveStorage::Variation.new(Uploads.resize_to_fill(width: width, height: height, blob: photo.blob))
    ActiveStorage::Variant.new(photo.blob, variation)
  end

我在我的 srcset 标签中调用这个方法：

<%= image_tag(@assoc.photo,
srcset:[
  [url_for(@assoc.photos_variants(@assoc.photo, 400, 300)), "512w"],
  [url_for(@assoc.photos_variants(@assoc.photo, 600, 450)), "768w"],
  [url_for(@assoc.photos_variants(@assoc.photo, 800, 600)), "1024w"],
  [url_for(@assoc.photos_variants(@assoc.photo, 1200, 900)), "1980w"]
  ],
  sizes: "100vw") %>

如何将 image_tag 与 srcset 和活动存储变体一起使用？

How to use image_tag with srcset and active storage variant?

ruby-on-rails

rails-activestorage

srcset