加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ruby-on-rails – 将image_tag与srcset属性一起使用?

发布时间:2020-12-16 23:30:36 所属栏目:百科 来源:网络整理
导读:我尝试在image_tag中使用srcset属性,但我无法使其工作. 我不确定它是语法错误还是通常在image_tag中不起作用. 是否可以在image_tag中使用srcset属性? 如果是,怎么样?,如果不是,为什么没有,是否有解决方法? %= link_to(image_tag("logo.png",alt: "logo",:
我尝试在image_tag中使用srcset属性,但我无法使其工作.

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

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

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

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

解决方法

而是在link_to name选项中添加image_tag,您可以使用块并将图像传递到那里.

如果要使用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,而不是创建自己的实现.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读