将图像源设置为firebase图像不起作用

Question

我有这个HTML

<ul>
 <li><img id="image1" src="images/single_1_thumb.jpg" alt="" data-image="images/single_1.jpg"></li>

</ul>

我想使用firebase存储图像作为src和data-image的源。我能够使用此代码为src做

var pic1 = snapshot.child("ProductImageUrl").val();

document.getElementById("image1").src = pic1;

但我无法想象如何为数据图像实现它。我试过这些

 document.getElementById("image1").data-image = pic1;
 document.getElementById("image1").'data-image' = pic1;
 document.getElementById("image1").data:image = pic1;

我第一次尝试得到的错误是

未捕获的ReferenceError：赋值中的左侧无效

如何实现将firebase映像设置为数据映像？

Answer 1

使用Element.setAttribute()更改DOM中的属性值

document.getElementById('image1').setAttribute('data-image', pic1)

或使用DataSet API

document.getElementById('image1').dataset.image = pic1