jQuery：如何使用base64图像对象作为列表样式图像

Question

我有一个base64编码PNG存储在JS对象my.photo。

我打算使用它作为列表式图像，但我不知道如何去做。我试过以下内容：

var image = new Image(); 
image.src = 'data:image/png;base64,'+my.photo; 
$('li').css({'list-style-image': image}); 

这没有奏效。该firbug控制台显示应用以下样式：

element.style { 
    list-style-image: url("[object HTMLImageElement]"); 
} 

如何使用JS或jQuery修复此问题？

Answer 1

也许试试这个来代替：

$('li').css({'list-style-image': 'url(' + image.src + ')'}); 

Answer 2

// Credits: Duvdevan 
$('li').css({'list-style-image': 'url(' + image.src + ')'}); 

由于这是JavaScript和you can do the same thing in many ways：

$('li').css('list-style-image', 'url(' + image.src + ')'); 

$('li').css('list-style-image', 'url(♥)'.replace('♥', image.src)); 

---

在你的问题，你并不需要所有该代码，new Image()，image.src = ...

$('li').css(
    'listStyleImage', 
    'url(data:image/png;base64,♥)'.replace('♥', my.photo) 
); 

Answer 3

那是因为你正在传递整个对象作为参数，而不是只是字符串（你不需要在这里实际创建的对象）。你也忘了url("..")部分。所以，其余的代码最后一行应该是：

$('li').css({'list-style-image': 'url("' + image.src + '")'});