Ruby on rails 通过Cloudinary/CarrierWave gem使用ruby代码在Popover引导程序中显示图像

嗨，这是我在这个模板中问的第四个问题。请找个人帮我：）

我使用flashcard，当我在上面触发光标时，我必须在popover中显示一个图像

这是我的密码

<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'
        });
      })

$（文档）.ready（函数（）{
$（“.popover img”）.popover({
是的，
触发器：“悬停”，
//内容：“，
位置：'底部'
});
})

---

结果是它无法显示图片

您遇到的问题是您正在呼叫的标签

cl_image_标记

是生成

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>

这将在悬停时调用它，并设置要在popover内容区域中呈现的数据内容属性中的值，只要其正确引用即可

--根据您的评论--

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

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

>

感谢您的帮助并理解我的问题。我试过了，效果很好！我只是将你的方法

当前用户。头像
上传到我的
@hiragana.upload
。给你加油。如果我想迭代，我是否只需在
平假名之前删除
@
。上载
？如果对象是使用
@
（在您的控制器中）创建的，则不会，是在不传递本地哈希的情况下使其可用的唯一方法。我的意思是我在show view中这样做
，在我的索引中我必须这样做
是的，您共享的第二个代码是正确的，在迭代块内部，
hiragana
确实不应该包括
@
。顺便说一下-请注意，
cl\u image\u标记（hiragana.upload，：width=>260，：height=>340）
生成一个图像标记，该标记从Cloudinary请求全尺寸图像，并在客户端执行大小调整（浏览器端大小调整）。为了让Cloudinary在交付之前调整图像大小，还应该包括裁剪模式。e、 例如，
cl\u图像标签（hiragana.upload，：width=>260，：height=>340，：crop=>：fill）
<% @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%>