将 image_tag 与 srcset 属性一起使用？

Question

我尝试在 image_tag 中使用 srcset 属性，但我无法使其工作。

我不确定这是语法错误还是在 image_tag 中通常不起作用。

是否可以在 image_tag 中使用 srcset 属性？

如果是，怎么做？如果不是，为什么不，是否有解决方法？

<%= link_to(image_tag("logo.png", alt: "logo", :id => "logo"), root_path) %>

Answer 1

而不是将 image_tag 添加到 link_to "name" 选项，您可以使用打开块并将图像传递到那里。

如果您想使用 srcset 属性，您可以扩展 image_tag 的功能，方法是创建一个助手：

def image_set_tag(source, srcset = {}, options = {})
  srcset = srcset.map { |src, size| "#{path_to_image(src)} #{size}" }.join(', ')
  image_tag(source, options.merge(srcset: srcset))
end

它用逗号连接每个尺寸，所以你可以这样做：

<%= link_to root_path do %>
  <%= image_set_tag 'logo.jpg', { 
     'logo_640.jpg'  => '640w', 
     'logo_1024.jpg' => '1024w', 
     'logo_1980.jpg' => '1980w' 
   }, sizes: '100vw', alt: 'logo', id: 'logo' %>
<% end %>

可以看到，5.2.1Rails版本中ActionView::Helpers::AssetTagHelper#image_tag引入的变化允许你通过srcset选项，带一个hash或者一个二维数组包含图像的不同响应版本的数组：

image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" })
# => <img src="/assets/icon.png" srcset="/assets/icon_2x.png 2x, /assets/icon_4x.png 4x">

image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw")
# => <img src="/assets/pic.jpg" srcset="/assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw">

因此，如果您使用的是更新的 Rails 版本，您可以只使用 image_tag 而不是编写自己的实现。

将 image_tag 与 srcset 属性一起使用？

Using image_tag with srcset attribute?

ruby-on-rails

image

srcset