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