Как генерировать URL-адрес блоба?

Question

Я пытаюсь установить img и src для BLOB-URL в vuejs.

Я пытался вызвать loadImg() метод внутри img и src; Это не сработало. Вот мой код:

<template>
 <a v-for="(post,index) in posts" :key="index">
     <img :src="loadImg(post.img)" >
 </a>
</template>

methods:{

loadImg: function (img) {

        fetch(img)
         .then(function(t){return t.blob()})
         .then(function(e){
          return URL.createObjectURL(e);
        }
      )
 }

}

Как мне установить изображение src на blob url? codesandbox => https://codesandbox.io/embed/2vmwj2k550

Answer 1

Как уже упоминалось в комментариях, вы действительно не хотите использовать метод здесь.С одной стороны, они крайне неэффективны, когда используются для внедрения контента.

Вместо этого вы хотите загрузить изображения асинхронно и обрабатывать различные состояния.

Например

data () {
  return { posts: [/* your data goes here */] } // initial data
},
async created () {
  for (let post of posts) { // using for..of so async actually waits
    // create some nice placeholder images to show something while they load
    // including the placeholder would probably work better in your initial data
    this.$set(post, 'imgUrl', 'some-nice-placeholder-image.png')

    // now load the images
    post.imgUrl = URL.createObjectURL(await fetch(post.img).then(res => res.blob()))
  }
},
beforeDestroy() {
  // cleanup
  this.posts.forEach(({ imgUrl }) => {
    URL.revokeObjectURL(imgUrl)
  })
}

и в вашем шаблоне

<a v-for="(post,index) in posts" :key="index">
  <img :src="post.imgUrl" >
</a>