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

现象

解决

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'"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/818068.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

交叉熵损失函数介绍

交叉熵是信息论中的一个重要概念&#xff0c;它的大小表示两个概率分布之间的差异&#xff0c;可以通过最小化交叉熵来得到目标概率分布的近似分布。 为了理解交叉熵&#xff0c;首先要了解下面这几个概念。 自信息 信息论的基本想法是&#xff0c;一个不太可能的事件发生了…

openwrt局域网配置多个IP

在局域网配置过程中&#xff0c;若是DHCP服务器关闭&#xff0c;又忘记了配置的ip&#xff0c;将很难访问到路由器重新进行配置。这种情况可以在路由器出厂时做一个备用ip去避免。 1.配置 以下是备用ip的配置方法&#xff0c;以SKYLAB的SKW99 WIFI模组为例进行说明&#xff1…

如何在树莓派安装Nginx并实现固定公网域名访问本地静态站点

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#xff0c;可以用于托管网站或 Web 应用程序。相比其他 Web 服务器&#xff0c;Ngi…

LeetCode 59.螺旋矩阵II

LeetCode 59.螺旋矩阵II 1、题目 力扣题目链接&#xff1a;59. 螺旋矩阵 II - 力扣&#xff08;LeetCode&#xff09; 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1…

你想来微软苏黎世混合现实研究中心学习和实习吗?

Microsoft Mixed Reality & AI Lab - Zurich 苏黎世混合现实研发中心简介 微软苏黎世混合现实与人工智能实验室概况 专注于利用计算机视觉绘制和理解环境&#xff0c;识别和跟踪相关物体&#xff0c;并帮助用户执行任务&#xff0c;构建混合现实的未来。该实验室还在探索混…

API接口淘宝开放平台item_get-获得淘宝商品详情API接口根据商品ID查询商品标题价格描述等详情数据

要使用淘宝开放平台的item_get API接口根据商品ID查询商品标题、价格、描述等详情数据&#xff0c;你需要先注册一个KEY账号&#xff0c;然后获取到api_key和api_secret。接下来&#xff0c;你可以使用Python的requests库来调用API接口。 以下是一个示例代码&#xff1a; # c…

网络管理实验二、SNMP服务与常用的网管命令

1 常用的网管命令 1.1 网络状态监视命令 包括以下命令&#xff1a;Ipconfig、ping、nslookup、dig、host ipconfig 作用&#xff1a;用来显示本机所有网卡的基本信息&#xff08;IP、掩码、网关、工作状态&#xff09;&#xff1b;用法&#xff1a;ipconfig展示&#xff1a;…

ExtendSim花生酱加工厂模型

该模型展示了ExtendSim可靠性模块与ExtendeSim离散速率技术相结合的协同作用。 在花生酱加工厂的最初阶段&#xff0c;花生经过烘烤和冷却。冷却后的花生经过热烫或水烫去外皮。这些经过漂白的花生进入过程的混合部分&#xff0c;在研磨机中用盐、葡萄糖和氢化油稳定剂将其粉碎…

如何通过Linux pciehp sysfs接口控制PCIe Slot电源状态?-3

pciehp sysfs接口电源控制与NVME驱动卸载的区别 从NVMe SSD设计本身而言&#xff0c;当通过pciehp sysfs接口对PCIe插槽执行Power Off操作时&#xff0c;由于NVMe SSD作为PCIe设备&#xff0c;其电源供应是直接依赖于所连接的PCIe插槽提供的。当插槽电源被关闭时&#xff0c;会…

死锁检测组件

一、死锁 线程 A 占用资源 1,线程 B 占用资源 2,线程 A 想占用资源 2,线程 B 想占用资源 1,线程 A 占用资源 1 的情况下去申请占用资源 2,线程 B 占用资源 2 的情况下去申请占用资源 1,就会出现互相等待对方释放资源的情况,也就是死锁。 CPU 占用率 100% → 出现死循环或…

国产HMI芯片Model3C ——工业品质价格亲民

工业级芯片相较于消费级芯片&#xff0c;在性能上确实拥有显著的优势&#xff0c;尤其对于带彩屏显示或HMI的产品来说&#xff0c;这种优势表现得尤为突出。 首先&#xff0c;对于带彩屏显示或HMI人机交互的产品来说&#xff0c;高性能的芯片是保证流畅的用户体验和快速响应的…

Spring中的适配器模式

在Spring MVC框架中&#xff0c;适配器模式主要体现在对不同类型的处理器&#xff08;即Controller&#xff09;的统一处理上。Spring MVC通过适配器模式来保证无论Controller的实现方式如何多样化&#xff0c;都能够被DispatcherServlet统一调用和管理。具体使用方式如下&…

如何AI绘画(动漫风格)

绘画描述&#xff1a;一只金毛犬 绘画结果&#xff1a; 如何AI绘画&#xff08;动漫风格&#xff09;&#xff1a; 关注一休哥助手微信公众号 点击小程序按钮打开一休哥助手小程序 切换到我&#xff0c;复制授权码 登录网站&#xff1a;https://www.fudai.fun/drawing&…

leetcode.45题:跳跃游戏II

Leetcode.45题&#xff1a;跳跃游戏II /* 题意的理解&#xff1a; nums[0] 只能跳 1 ~ nums[0]步 依次类推&#xff1a;从nums[0] - nums[n - 1] 最少需要多少步数 nums 2 3 1 1 4 nums[0] 2,初始只能跳 1/2步&#xff0c;如跳1步&#xff0c;达到nums[1] 而nums[1] 3,顾第二…

网络篇01 | 入门篇

网络篇01 | 入门篇 01 各层协议目录[网络篇02 | 应用层 kcp&#xff08;王者荣耀&#xff09;](https://blog.csdn.net/qiushily2030/article/details/135835946)[网络篇03 | 应用层 quic](https://blog.csdn.net/qiushily2030/article/details/136192481)[网络篇04 | 应用层 m…

Stable Diffusion之文生图模型训练

1、数据准备 提前准备好一组相关的照片。 在线的图片处理网站 BIRME - Bulk Image Resizing Made Easy 2.0 (Online & Free) 将图片转成统一大小&#xff0c;支持批量处理&#xff0c;效率高 2、生成提示词 进入stable diffusion webui页面 旧版直接使用 train/proproc…

医院一站式后勤管理系统 processApkUpload.upload 任意文件上传漏洞复现

0x01 产品简介 医院一站式后勤管理系统由南京博纳睿通软件科技有限公司开发的一款基于现代医院后勤管理理念的业务系统,产品结合后勤业务管理特点,通过管理平台将后勤管理业务予以系统化、规范化和流程化,从而形成一套构建于平台之上且成熟完善的后勤管理体系,并可在此体系…

使用阿里云试用Elasticsearch学习:Search Labs Tutorials 搭建一个flask搜索应用

文档&#xff1a;https://www.elastic.co/search-labs/tutorials/search-tutorial https://github.com/elastic/elasticsearch-labs/tree/main/example-apps/search-tutorial Full-Text Search

Excel报表成果展示

采用Excel函数实现数据的快速计算&#xff0c;如下&#xff0c;看似很复杂&#xff0c;实际非常方便。

文献速递:深度学习肝脏肿瘤诊断---基于深度学习的肝细胞结节性病变在整片组织病理图像上的分类

Title 题目 Deep Learning-Based Classification of Hepatocellular Nodular Lesions on Whole-Slide Histopathologic Images 基于深度学习的肝细胞结节性病变在整片组织病理图像上的分类 Background 背景 Hepatocellular nodular lesions (HNLs) constitute a heterogen…