Question

我正在尝试将图像添加到bootstrap popover中，但我无法获取图像。但是它显示的是html.how我可以解决这个问题吗？

<img class="filter-icon" src="images/filter-icon.png" class="filter-icon" data-toggle="popover" data-content="<img src='images/club.png'>" popover>

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

Answer 1

标记：

VS

VS

Answer 2

试试这个：添加参数＆＃34; html＆＃34;：true

$(document).ready(function(){
   $('[data-toggle="popover"]').popover({
      html:true
   });   
});

Answer 3

您需要将html选项指定为true，请尝试以下方式：

$('[data-toggle="popover"]').({ html:true });

Answer 4

此方法用于使用 Bootstrap 4或更高版本通过数据内容属性仅添加图像。 https://jsfiddle.net/aq9Laaew/270085/

使用HTML按钮，按下或点击时，默认行为会切换弹出框。

<button type="button" class="btn pl-2" data-container="body" data-toggle="popover" data-html="true" title="Popover Title" data-content="<img src='https://dummyimage.com/100x100/cccccc/333333.png'/>">Image popover</button>

使用HTML锚点，当锚点收到 focus 时，默认行为有效，一旦失去 focus ，则默认行为消失。

<a tabindex="0" class="btn pl-2" role="button" data-trigger="focus" data-container="body"  data-toggle="popover" data-html="true" title="Popover Title" data-content="<img src='https://dummyimage.com/100x100/cccccc/333333.png'/>">Dismissible popover</a>

?documention

如何将图像添加到引导程序弹出窗口？

4 个答案: