Как получить изображение из хранилища Firebase в DOM - используя javascript для Интернета?

Question

Я работаю над сайтом по недвижимости, и я почти завершила его. Однако мне удалось загрузить изображение в хранилище базы данных из DOM. Но у меня возникает проблема, когда я хочу поместить его в функцию setupProp, чтобы показать с другими данными из базы данных. Подсказка: я провел тест, и он сработал, когда я создал элемент img в DOM, и он появился. ниже мой код:

const createForm = document.querySelector('#create-form');
createForm.addEventListener('submit', e => {
    e.preventDefault();

    const ref = firebase.storage().ref()
    const file = createForm['upload-file'].files[0]
    const name = new Date() + '-' + file.name

    const task = ref.child(name).put(file)
    task.then(snapshot => snapshot.ref.getDownloadURL())
    .then(url => {
        setupProp(url)
    })

    // adding to the Database
    db.collection('properties').add({
        title: createForm['create-title'].value,
        city: createForm['add-city'].value,
        type: createForm['type-rent-sale'].value,
        rooms: createForm['add-rooms'].value,
        price: createForm['add-price'].value
    }).then(() => {
        // close the modal and reset form
        const modal = document.querySelector('#modal-create');
        M.Modal.getInstance(modal).close();
        createForm.reset();
    }).catch(err => {
        console.log(err.message);
    })
});

и это если для DOM:

const setupProp = (data, url) => {
  let html = '';
  data.forEach(doc => {
    const info = doc.data();
    let li = `
    <div class="col s12 l4 items">
      <div class="card" style="height: 407px;">
        <div class="card-image">
          <a href="property.html">
          <img src="${url}" style="height: 228px;"></a>
          <a class="btn-floating halfway-fab waves-effect waves-light red center status">${info.type}</a>
        </div>
        <div class="card-content">
          <span><b class="house-title">${info.title}</b></span><br>
          <span><b class="blue-text price">${info.price}</b> &#36;</span><br>
          <span class="material-icons blue-text">room</span>
          <span><b class="city">${info.city}</b></span><br>
          <span class="material-icons blue-text">single_bed</span>
          <span><b class="rooms">${info.rooms}</b> rooms</span>
        </div>
      </div>
  </div>
    `;
    html += li

    showingProp.innerHTML = html;
  })
}