vue3 img blob显示
时间: 2024-09-25 11:17:47 浏览: 11
在 Vue3 中,如果你想通过 Blob 对象来显示图片,你可以利用 `URL.createObjectURL` 函数将 Blob 转换为 URL,然后设置到 `<img>` 元素的 `src` 属性上。这通常在处理文件上传、从后端获取二进制数据等场景时会用到。下面是一个简单的示例:
```html
<template>
<div>
<img v-if="imageUrl" :src="imageUrl" alt="图片加载中...">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: null,
};
},
methods: {
handleImageBlob(blob) {
const url = window.URL.createObjectURL(blob);
this.imageUrl = url;
// 当然,你需要在适当的时候清除这个 URL,比如在组件销毁时
// 或者设置了新图片后,记得添加一个清理函数
return () => URL.revokeObjectURL(url);
},
},
created() {
// 假设你在组件创建时接收到一个 Blob
let myBlob = ...; // 替换成实际的 Blob 对象
this.handleImageBlob(myBlob);
},
};
</script>
```