Как получить URL-адрес, хранящийся в базе данных Firebase, а затем заполнить тег изображения sr c?

Question

Я следовал хорошему руководству по созданию базы данных Firebase. (https://www.youtube.com/watch?v=kmTECF0JZyQ) Затем мне удалось получить эти данные для отображения на моей веб-странице. Работа с текстом и числами понятна, но что происходит, когда я хочу отобразить изображение на моей странице HTML? Изображения подаются с моего сайта.

Таким образом, я могу использовать текстовое поле для хранения URL-адреса изображения, но как я мог бы показать это на своей странице при создании тега, но явно не 'sr c' для заполнения 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.sr c, чтобы загрузить URL в img:

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

Answer 2

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);
    })
})