使用Blob本地预览图片（vue环境）

最新推荐文章于 2024-02-29 18:06:13 发布

原创最新推荐文章于 2024-02-29 18:06:13 发布 · 2.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#blob #前端

收录于

开箱即用专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用JavaScript从接口获取图片URL并转化为本地对象URL，展示了在Vue组件中利用axios下载文件并设置img标签src的过程。重点在于代码实现和图片资源的处理。

话不多说，上代码

<template>
    <div>
        <img
           :src="imgSrc"
           alt=""
        >
    </div>
</template>
<script>
export default {
    data(){
        return {
            imgSrc: '',
        }
    }，
    created() {
        getImg(this.$route.params.id).then(res => {
            const blob = new Blob([res],{type:'image/png'})
            const url = windows.URL.creatObjectURL(blob)
            this.imgSrc = url
        }
    }
}
</script>

this.imgSrc 数据格式：

["bobl:http//localhose:8080/******"]

接口设置：

 export function downFile(url) {
    return request({
        url:url,
        method: 'get',
        responseType:'blob'
    })
}
 expost const getImg = (id) => downFile(`地址${id}`)