前端 二进制流(blob)转图片
前端 二进制流图片在页面上直接显示
·
效果图
代码
//网上随便找的图片
const url =
"https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
axios
.get(url, {
responseType: "blob", //一定要传!!!
})
.then((res) => {
console.log(res.data, "二进制流");
const objectURL = URL.createObjectURL(res.data);
this.imgSrc = objectURL;
});
最终长这样哈
优点:
- 比base64小(简洁)
- 比base64快
- 比转base64过程简单
完整代码
<template>
<div class="app">
<img :src="imgSrc" alt="图片" />
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
imgSrc: "",
};
},
mounted() {
//网上随便找的图片
const url =
"https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
axios
.get(url, {
responseType: "blob", //一定要传!!!
})
.then((res) => {
console.log(res.data, "二进制流");
const objectURL = URL.createObjectURL(res.data);
console.log(objectURL);
this.imgSrc = objectURL;
});
},
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)