使用带有srcset属性的image_tag?

时间:2017-07-27 20:03:08

标签: ruby-on-rails image srcset

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

我不确定它是否是语法错误,或者它通常在image_tag中不起作用。

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

如果是,怎么做?如果不是,为什么不呢?是否有解决方法?

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

1 个答案:

答案 0 :(得分:14)

在link_to image_tag选项中添加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.1 Rails版本中ActionView :: Helpers :: AssetTagHelper#image_tag中引入的更改允许您传递srcset选项,其中包含散列或包含2D数组的数组您图片的不同响应版本:

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而不是创建自己的实现。