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图片