通过 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 属性中的值设置为在弹出内容区域中呈现，只要它被正确引用。

-- 根据您的意见 ---

我认为您的视图代码可能看起来像：

<% @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%>

通过 Cloudinary/CarrierWave gem 使用 ruby 代码在 Popover Bootstrap 中显示图像

Display an image in a Popover Bootstrap with ruby code via Cloudinary/CarrierWave gem

ruby-on-rails

twitter-bootstrap

carrierwave

popover

cloudinary