如何生成blob URL？

Question

我正在尝试将img和src设置为vuejs中的blob URL。

我试图在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>