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