Question

我需要一些帮助，我想将图像设置为数据属性。

这是我想要实现的一个例子。

<div class='square' data="https://churchbucket.s3.amazonaws.com/uploads/picture/image/5/medium_pastor1.jpg?X-Amz-Expires=600&X-Amz-Date=20170825T160713Z&X-Amz-Algorithm=AWS4-HMAC-">

但我不知道如何在Rails上使用图片上传获得正确的语法。

<%= image_tag page_pc.image.url(:large), class:'square' if page_pc.image? %>

如果有人知道如何获得这项工作或任何其他替代方案，请非常感谢您的帮助。

这是我的HTML

的示例

<div class="square-flip">
    <div class='square' data-image="http://titanicthemes.com/files/flipbox/kallyas-bundle.png">
        <div class="square-container">
            <div class="align-center"><img src="http://titanicthemes.com/files/flipbox/kallyas.png" class="boxshadow" alt=""></div>
            <h2 class="textshadow">Kallyas WordPress Theme</h2>
            <h3 class="textshadow">The #1 Selling Most Enjoyable and Creative Multipurpose WordPress theme.</h3>
        </div>
        <div class="flip-overlay"></div>
    </div>
    <div class='square2' data-image="http://titanicthemes.com/files/flipbox/kallyas-bundle.png">
        <div class="square-container2">
            <div class="align-center"></div>
            <a href="http://kallyas.net" target="_blank" class="boxshadow kallyas-button">View Demos</a>
        </div>
        <div class="flip-overlay"></div>
    </div>
</div>

Answer 1

您可以使用TagHelper#content_tag创建一个div，它可以包含所需的css和数据属性，例如：

<%= content_tag :div, '', class: 'square', data: { image: image } %>

打印哪些：

<div class="square" data-image="image"></div>

要访问资产文件夹中的图片，您可以使用asset_path：

<%= content_tag :div, '', class: 'square', data: { image: asset_path('image.jpg') } %>

如果您需要在content_tag中添加内容，则可以将块作为最后一个参数传递，如下所示：

content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block)

所以你可以试试：

<%= content_tag :div, '', class: 'square', data: { image: asset_path('image.jpg') } do %>
  <div class="square-container">
    ...
  </div>
  ...
<% end %>

无论如何，你可以在不使用content_tag的情况下做类似的事情，例如：

<div class="square" data-image="<%= asset_path('image.jpg') %>">
  <div class="square-container">
    ...
  </div>
</div>

在Rails图像上载中将图像设置为数据属性

1 个答案: