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网址？ 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>

您如何生成Blob URL？

1 个答案: