How to retrieve the image from firebase storage to the DOM - using javascript for web?

I am doing a real-estate website and i have nearly completed it. However, I have managed to upload the image to the firebase storeage from the DOM, and it is stored under ('property/'). But I am facing a problem that when i retrieve the image to the DOM, its not working. But the other information from the database are getting retrieved without any problem. I would be grateful if you could help me with this issue, since i have been trying for a long time but its not working.

// Listen for auth status changes
auth.onAuthStateChanged(user => {
    setupUI(user);
})

// get data from the cloud Database
db.collection('properties').onSnapshot(snapshot => {
    setupProp(snapshot.docs);

});

// get images from the firebase storage to the DOM
storageRef('property/').getDownloadURL().then(url => {
    setupProp(url);
});

// Create new POST and send it to firebase clould database and storage
const createForm = document.querySelector('#create-form');
createForm.addEventListener('submit', e => {
    e.preventDefault();
    // Adding to the storage
    // get file
    const file = createForm['upload-file'].files[0];
    // create a storage ref
    const storageRef = firebase.storage().ref('property/' + file.name);
    // upload file
    storageRef.put(file);


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

and this if for the DOM:

const setupProp = (data) => {
  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="" style="height: 228px;">${url}</a> // here its not working!
          <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;
  })
}