Хранение Firebase getDownloadURL создает бесконечный цикл

Question

При попытке извлечь URL из загруженного файла из хранилища Firebase, я получаю бесконечный цикл, который блокирует мой браузер.

HTML

<div class="row" v-for="(item, idx) in data" :key="item.id">
  <img :src="get_image_url(item.id, item.images)">
</div>

функции VueJS Получить изображения

get_image_url: function(id, images) {
  storage.ref().child('products/' + id + '/' + images[0]).getDownloadURL()
  .then(url => {
    console.log(url)
    return url
  })
  .catch(err => {
    console.log(err)
  })
}

Получить данные

created: function() {
  db.collection('shops').doc(vm.$route.params.id)
  .collection('inventory').get()
  .then(res => {
    res.forEach(doc => {
      const id = doc.id
      const data = doc.data()
      vm.data.push({ id, ...data })
    })
  })
}

Answer 1

Похоже, что если вы получите URL-адрес изображения при получении данных, это не вызовет бесконечный цикл.

HTML

<div class="row" v-for="(item, idx) in data" :key="item.id">
  <img :src="item.url">
</div>

Vue Created

created: function() {
  db.collection('shops').doc(vm.$route.params.id)
  .collection('inventory').get()
  .then(res => {
    res.forEach(doc => {
    storage.ref().child('products/' + doc.id + '/' + doc.data().images[0]).getDownloadURL()
    .then(resp => {
      const id = doc.id
      const data = doc.data()
      const url = resp
      vm.data.push({ id, resp, ...data })
    })
    .catch(err => {
      console.log(err)
    })
  })
}