响应式活动存储映像有哪些选项

Question

我正在为博客应用程序附件使用Active Storage。许多观众使用他们的手机，这就是为什么我需要@ 2和@ 3图像变体的原因。

据我所知，srcset的{​​{1}}选项不适用于Active Storage，因此我想知道是否要创建图像帮助程序

image_tag

并检测可以在视图中传递的视口 @scale

def image_helper(scale)
  if scale == 1
    return self.file.variant(resize: "400x400")
  elsif scale == 2
    return self.file.variant(resize: "800x800")
  end
end

我可以使用 JavaScript 进行此操作吗？还是有其他选择？

///我对自定义尺寸的自适应图像的解决方案：

根据 @ bo-oz ，我使用了JavaScript Cookie API https://github.com/js-cookie/js-cookie

警告：内部状态：JS Cookie无法与Edge 16配合使用-有人可以对其进行测试吗？我在Windows 7上工作

1. 发送 devicePixelRatio 到Cookie：

<%= image_tag product.image_helper(@scale) %>

1. 创建图像助手功能（仅适用于@ 1和@ 2图像，但易于扩展）

var scale = window.devicePixelRatio;
Cookies.set('scale', scale);

1. 在视图中使用它，例如

def image_helper(file, scale, size)
  @file = file
  if scale = 1
    return @file.variant(resize: "#{size}x#{size}")
  else
    return @file.variant(resize: "#{2*size}x#{2*size}")
  end
end

如果您有任何建议，请参阅此：）