在Vue中将二进制流转成图片可以通过创建Blob对象和URL.createObjectURL()方法实现。下面是一个简单的示例代码:
```html
<template>
<div>
<img :src="imgUrl" alt="图片">
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: ''
}
},
methods: {
// 二进制流转成图片
convertBinaryToImg(binary) {
const blob = new Blob([binary], {type: 'image/png'}) // 创建Blob对象
this.imgUrl = URL.createObjectURL(blob) // 转成图片url
}
},
mounted() {
// 模拟二进制流
const binary = new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,100,0,0,0,100,8,6,0,0,0,141,100,38,205,0,0,0,9,112,72,89,115,0,0,7,26,0,0,7,26,1,0,154,156,24,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,0,9,112,73,68,65,84,120,218,237,157,79,108,195,96,20,134,207,239,111,219,35,169,36,130,76,169,10,18,69,73,137,10,138,106,92,72,5,115,37,189,66,235,216,214,122,47,108,98,28,56,167,25,65,46,200,218,210,53,168,150,7,208,156,244,112,102,131,99,48,9,179,174,17,253,174,43,97,205,99,105,117,85,147,186,231,246,123,238,123,247,155,242,36,187,234,41,8,15,219,92,20,247,8,7,194,204,23,192,49,10,0,96,22,194,8,0,128,1,3,0,2,0,128,8,96,2,0,0,0,0,73,69,78,68,174,66,96,130]) // png格式的二进制流
this.convertBinaryToImg(binary) // 转成图片
}
}
</script>
```
在上面的代码中,我们模拟了一个png格式的二进制流,并且将其转成了图片。我们可以根据自己的实际需求来替换二进制流。