rails中的Html5数据属性答案

【问题标题】：Html5 Data attributes in railsrails中的Html5数据属性
【发布时间】：2016-06-16 21:34:03
【问题描述】：

我正在使用为我的 rails 项目购买的主题，主题的作者使用 html5 数据属性作为背景图像，代码如下所示

   <section class="jumbotron full-height relative" data-pages-bg-image="assets/images/banner_1.jpg" data-bg-overlay="black" data-overlay-opacity="0.5">

我找到了一个关于如何在 rails 中使用数据属性的资源，但它对我并不真正有用。这是我找到的链接 http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

如何将上面的代码转换为在 Rails 中工作（我使用 erb 作为模板引擎）

【问题讨论】：

标签： ruby-on-rails html ruby-on-rails-4 custom-data-attribute

【解决方案1】：

您可以使用相同的标记，但是，您需要使用 RoR 的助手来获取图像的 url - 您可以使用 image_path：

   <section class="jumbotron full-height relative"
      data-pages-bg-image="<%= image_path('images/banner_1.jpg') %>"
      data-bg-overlay="black"
      data-overlay-opacity="0.5">

【讨论】：

【解决方案2】：

我认为假设您拥有正确的资产路径，这应该可以工作：

image_tag("assets/images/banner_1.jpg", class: "jumbotron full-height relative" data-bg-overlay: "black", data-overlay-opacity: '0.5')

【讨论】：

【解决方案3】：

另外，对于下面的答案，如果你真的想把它转换成erb模板，你可以这样写：

<%= content_tag(:section, "", class: "jumbotron full-height relative", "data-pages-bg-image" => "assets/images/banner_1.jpg", "data-bg-overlay" => "black", "data-overlay-opacity" => "0.5") %>

【讨论】：