通过 Cloudinary/CarrierWave gem 在带有 ruby​​ 代码的 Popover Bootstrap 中显示图像

Question

您好，这是我在此模板中提出的第四个问题。请有人帮助我:)

我在抽认卡上工作，当我在上面触发光标时，我必须在弹出窗口中显示一个图像。

这是我的代码

<div class="idea">
   <i class="fa fa-lightbulb-o fa-lg popover-img" 
   data-content=<%="#{cl_image_tag(@hiragana.upload, :width => 260, :height => 340)}"%>></i>
</div>

我把它放在数据内容中。

我使用这个 javascript 在我的 layout/application.html.erb 中调用它

<script >
      $(document).ready(function(){
        $(".popover-img").popover({
          html: true,
          trigger: "hover",
          // content: "",
          placement:'bottom'
        });
      })

结果是无法显示图片

Answer 1

您遇到的问题是您正在调用的标签。 cl_image_tag 是一个生成 img html 标记的助手。但是您的 js 已对内容行进行了注释，所以我猜您已经尝试了几件事。

如果您选择使用标签创建器，并且我理解您为什么会这样做，它会使生成基于大小的 cloudinary url 更加简单，那么您需要在数据元素中用单引号正确转义它，然后调用它并在js中渲染整个html标签。

例如我有这样的事情：

<span class="popover-trigger fa fa-4x fa-ban "
     data-toggle="popover"
     data-content='<%= cl_image_tag(current_user.avatar, 
        :width => 250, :height => 200) %>'></span>

然后你的 JS 看起来像：

$('[data-toggle="popover"]').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return $(this).data('content');
  }
});

这将在悬停时调用它，并将 data-content 属性中的值设置为在弹出内容区域中呈现，只要它被正确引用。

-- 基于你的 cmets ---

我认为您的视图代码可能如下所示：

<% @hiraganas.each do |hiragana| %> 

<div class="idea">
   <i class="fa fa-lightbulb-o fa-lg popover-img" 
   data-toggle="popover"
   data-content=<%="#{cl_image_tag(hiragana.upload, 
   :width => 260, :height => 340)}"%>></i>
</div>
<%end%>