前端 接口返回来的照片太大 加载慢如何解决

现象

解决

1. 添加图片懒加载

背景图懒加载 对背景图懒加载做的解释

和图片懒加载不同，背景图懒加载需要使用 v-lazy:background-image，值设置为背景图片的地址，需要注意的是必须声明容器高度。

<div v-for="img in imageList" v-lazy:background-image="img" />

<!-- 新增懒加载组件 --><lazy-component><li class="content_img_li" v-for="(items, index) in item.pic" :key="items.img"><p ref="img"><!-- <span@click="kanTu(index, item.pic)":style="{background: 'url(' + items + ') no-repeat center center',backgroundSize: items ? 'cover' : ''}"></span> --><!-- 增加的 背景懒加载 和 --><span@click="kanTu(index, item.pic)"v-lazy:background-image="items + '?imageView2/0/w/200'":style="{backgroundSize: items ? 'cover' : ''}"></span></p></li></lazy-component>

1. 对图片的大小做限制 '?imageView2/0/w/200'     只针对七牛云有效果

最主要的 就是这句 v-lazy:background-image="items + '?imageView2/0/w/200'"