javascript - 如何检索 Firebase 数据库中存储的网址，然后填充图像标记的 src？

Question

我遵循了有关如何创建 Firebase 数据库的精彩教程。 ( https://www.youtube.com/watch?v=kmTECF0JZyQ ) 然后我设法检索到此数据以显示在我的网页上。使用文本和数字很清楚，但是当我想在 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);
    })
})

Answer 1

img 元素没有 textContent 属性。我想你打算使用 img.src将 URL 加载到 img 中:

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