vue展示base64格式图片

3,626 阅读1分钟

base64

图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

网页上的每一个图片,都是需要消耗一个 http 请求下载而来的。

图片使用base64格式进行编码后,图片的下载就不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地。

好处是可以节省一个 http 请求

但是相应的,CSS 文件体积会增大,可能会导致关键渲染路径的阻塞,导致用户会长时间注视空白屏幕。

HTML 和 CSS 会阻塞渲染,而图片不会。

base64适用于极小或者极简单图片,或者背景图片,重复使用的图片。

使用

<img :src=" 'data:image/png;base64,' + base64的地址 ">

base64地址拼接在 data:image/png;base64, 后,作为src

<img :src="'data:image/jpeg;base64' + itemImg" alt="">
    //字符串拼接
 <div class="picBorder" v-for="(item, idx) in detailInfo.picture" :key="idx">
    <img :src="`data:image/png;base64,${item}`" />
    //使用模板字符串
 </div>

参考文章:

vue如何展示base64图片_猴小七儿的博客-CSDN博客_vue显示base64图片

vue中使用img标签动态显示base64图片_优秀的秃顶美男子的博客-CSDN博客_img动态显示图片

图片Base64编码的利与弊分析 - 简书 (jianshu.com)