Javascript 如何检索存储在Firebase数据库中的URL，然后填充图像标记'；什么是src？

我遵循了一个关于如何创建Firebase数据库的良好教程。（）然后我设法检索了这些数据并显示在我的网页上。处理文本和数字是很清楚的，但是当我想在HTML页面上呈现图像时会发生什么呢？图片是从我的网站上提供的

因此，我可以使用一个文本字段来存储图像的URL，但是当创建标记时，我如何在页面上显示它，但显然不是“src”来填充URL。欢迎任何帮助

const productList = document.querySelector('#productList');

function renderProducts(doc) {
    let li = document.createElement('li');
    let title = document.createElement('span');
    let price = document.createElement('span');
    let image = document.createElement('img');

    li.setAttribute('data-id', doc.id);
    title.textContent = doc.data().title;
    price.textContent = doc.data().price;
    image.textContent = doc.data().image;

    li.appendChild(title);
    li.appendChild(price);
    li.appendChild(image);

    productList.appendChild(li);
}

db.collection('Products').orderBy('title').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderProducts(doc);
    })
})

---

img

元素没有textContent属性。我想您是想用它将URL加载到

img

：

image.src = doc.data().image;

---

也许我弄错了。。。为什么不将src属性设置为图像URL-

image.setAttribute（imgUrl）

？谢谢Doug。我知道img标签正在创建中，但不知道你可以像你的答案中那样针对图像的src。我已经更新了我的代码到下面，它的工作！谢谢你的帮助，真的帮助了我的学习和理解。

const productList = document.querySelector('#productList');

function renderProducts(doc) {
    let li = document.createElement('li');
    let title = document.createElement('span');
    let price = document.createElement('span');
    let image = document.createElement('img');

    li.setAttribute('data-id', doc.id);
    title.textContent = doc.data().title;
    price.textContent = doc.data().price;
    image.src = doc.data().image;

    li.appendChild(title);
    li.appendChild(price);
    li.appendChild(image);

    productList.appendChild(li);
}

db.collection('Products').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderProducts(doc);
    })
})