如何在Popover中添加图片作为属性值？（已解决）

I ran into this exact issue where my Popover was showing the <img> tag as plain text instead of rendering the actual image. Here's the code I initially used to create the element and set up the Popover attributes:

var item = document.createElement('div'); 
var att2 = document.createAttribute("data-toggle"); 
var att3 = document.createAttribute("title"); 
var att4 = document.createAttribute("data-content"); 
var att5 = document.createAttribute("data-placement"); 

att4.value = "<img src='blablabla.png' />"; 
att3.value = itemname; 
att2.value = "popover"; 
att5.value = "top"; 

item.setAttributeNode(att5); 
item.setAttributeNode(att2); 
item.setAttributeNode(att3); 
item.setAttributeNode(att4);

The problem here is that Bootstrap Popover escapes HTML content by default—it treats whatever you put in data-content as plain text for security reasons, which is why your image tag was showing up as code instead of a rendered image.

To fix this, you just need to explicitly tell the Popover to render HTML content by adding html: true when initializing it. Here's the corrected initialization code:

$('[data-toggle="popover"]').popover({
  html: true,
  trigger: "hover",
  container: 'body'
});

Once you add that html: true option, the Popover will properly parse and render the image tag. Just make sure your image path (blablabla.png) is correct so the image loads as expected!

内容的提问来源于stack exchange，提问作者onurtore