Firebase存储getDownloadURL创建无限循环

Question

当尝试从firebase存储中从上传的文件中检索URL时，我得到一个无限循环来锁定我的浏览器。

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