vue3-lazy图片懒加载

news2024/12/25 22:10:49

vue3-lazy:https://github.com/ustbhuangyi/vue3-lazy

1、npm安装

npm install vue3-lazy -S

2、main.js注册

import { createApp } from 'vue'
import App from './app'
import lazyPlugin from 'vue3-lazy'

const app = createApp(App)
app.use(lazyPlugin, {
  loading: 'loading.png',
  error: 'error.png'
})
app.mount('#app')

3、页面使用

图片位置不变,地址切换可添加key更改图片显示

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" :key="img.src" >
  </li>
</ul>

在这里插入图片描述

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

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

相关文章

Linux使用指定账户启动进程的两种思路和实现

出于安全的考虑,通常启动进程会不适用root账户,而是使用一些权限较低的账户。 例如启动nginx,在安装这个应用的时候创建nginx账户,用于启动nginx服务。 在nginx配置文件中,user选项就是指定启动nginx使用的用户名。 这里我们 看到nginx进程除了第一个是root用户,其它…

算法工程师的基本职责概述(合集)

算法工程师的基本职责概述 算法工程师的基本职责概述1 职责&#xff1a; 1、负责图像特征提取、运动物体跟踪算法的开发与实现。 2、负责进行各类机器学习、深度神经网络产品的研发。 3、负责设计研究相关算法&#xff0c;并优化算法性能。 4、负责撰写相关算法研发报告、技术方…

基于分布式ADMM算法的考虑碳排放交易的电力系统优化调度研究(matlab代码)

目录 1 主要内容 目标函数 计算步骤 节点系统 2 部分代码 3 程序结果 4 下载链接 点击直达&#xff01; 1 主要内容 程序完全复现文献《A Distributed Dual Consensus ADMM Based on Partition for DC-DOPF with Carbon Emission Trading》&#xff0c;建立了一个考虑…

3年测试工作经验裸辞,现在有点后悔了····

2020年毕业&#xff0c;现在有3年的测试工作经验&#xff0c;刚毕业前半年在一家知名上市公司&#xff0c;后面则进入一家传统行业公司待到现在2年半。 由于看不到技术成长以及其他原因&#xff0c;上上周辞职了&#xff0c;目前交接中&#xff0c;下个月中旬就得离开了&#…

ChatGPT免费国内在线直连入口,2023持续分享中

这个国内在线版ChatGPT可以提供与OpenAI官方ChatGPT相同的使用效果&#xff0c;让你在不懂技术的情况下轻松接触人工智能。 国内镜像&#xff1a; ChatGPT国内直连版&#xff08;点我&#xff09;http://test.ai111.top 随着OpenAI不断推出更新版本&#xff0c;现在GPT3.5和…

如何成为机器学习工程师

如何成为机器学习工程师 又到一年一度的毕业季。今年的毕业季有点不同&#xff0c;这是迎着 AI 爆发元年的毕业季&#xff0c;很多同学想投身 AI 和机器学习行业&#xff0c;向我咨询了很多如何成为一名机器学习工程师的问题。在此&#xff0c;我结合自身入行十年的经理&#…

科聪控制系统助力铸造行业向“智能”实现“质”的突破!

此项目现场为传统铸造业&#xff0c;铸造是装备制造业发展不可或缺的重要环节&#xff0c;是众多主机和重大技术装备发展的重要支撑。该现场以往由人工遥控车辆来进行物资的挪动&#xff0c;现投运搭载科聪控制系统的AGV来代替人工用遥控车辆来移动物资。实现上位机上一键发送任…

TF卡被格式化后要如何找到照片

TF卡在日常使用时&#xff0c;具有体积小存储大的优势而被我们用来存储一些重要的照片&#xff0c;但由于内存比较小&#xff0c;TF卡用户需要经常对TF卡中的照片进行清理&#xff0c;避免内存不足等问题&#xff0c;接下来讲下TF卡被格式化后要如何找到照片。TF卡被格式化后要…

什么是IPAM(IP地址管理)?

我们目前生活在一个依赖IP的世界&#xff0c;IPAM&#xff08;IP地址管理&#xff09;已成为网络管理不可避免的一部分。在 IP 连接设备爆炸式增长之前&#xff0c;IPAM 网络通常随着连接用户数量的增加而增长。但是&#xff0c;现在网络必须根据我们用于工作的 IP 设备数量为每…

消防安全知识答题活动小程序v4.1.0

消防安全知识答题活动小程序v4.1.0 v4.1.0 1&#xff09;支持多选题 .wxml <checkbox-group class"checkbox-group" bindchange"checkboxChange"><label class"checkbox" wx:for"{{questionList[index].option}}" wx:for…

网络货运系统开发,网络货运系统源码,货主端APP源码、司机端APP源码、PC后台管理系统源码

网络货运系统开发&#xff0c;网络货运系统源码&#xff0c;货主端APP源码、司机端APP源码、PC后台管理系统源码 网络货运为无车承运人更名而来&#xff0c;网络货运平台的好处可以节省找车找货的时间与成本。根据国家对智慧物流行业的发展规划&#xff0c;及《网络平台道路货…

Wincc报表:利用用户归档制作报表查询+打印输出

本文需要结合案例及教学视频共同观看 wincc报表项目案例及完整教学视频下载地址&#xff1a; http://www.zhikonglianmeng.com/t-1635.html 一、创建变量 1、分别创建1个系统变量和1个内部变量&#xff1a;用于时间和日期存储。 WINCC组态项目编辑器——变量管理——单击添加…

Angular学习笔记:environment.ts文件,路由

本文是自己的学习笔记&#xff0c;主要参考资料如下。 - B站《Angular全套实战教程》&#xff0c;达内官方账号制作&#xff0c;https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p32&vd_sourceab2511a81f5c634b6416d4cc1067…

navicat 导出字段信息

1&#xff0c;在新建查询创建sql如下 SELECT TABLE_NAME 表名, COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA_TYPE 字段类型, CHARACTER_MAXIMUM_LENGTH 长度, IS_NULLABLE 是否为空, COLUMN_DEFAULT 默认值, COLUMN_COMMENT 备注 FROM information_schema. COLUMNS WHERE T…

斑梨电子0.96寸LCD显示屏扩展板80X160 IPS适配Air10X开发板/海凌科W806开发板

spotpear.cn/index/product/detail/id/1338.html detail.tmall.com/item.htm?id720906602241&spma211lz.success.0.0.6cc02b90cwGrbH 【产品参数】 [] 尺寸&#xff1a;0.96寸 [] 显示面板&#xff1a;IPS [] 分辨率&#xff1a;80x 160 [] 驱动芯片&#xff1a;默认…

创意无限,纪念不止——我的创作纪念日

作者主页&#xff1a;爱笑的男孩。的博客_CSDN博客-深度学习,活动,python领域博主爱笑的男孩。擅长深度学习,活动,python,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typeblog个…

Linux系统编程 进程相关概念

1. 进程相关概念 程序(Program)”是一个静态的概念&#xff0c;一般对应于操作系统中的一个可执行文件 执行中的程序叫做进程(Process)&#xff0c;是一个动态的概念 ,现代的操作系统都可以同时启动多个进程。 程序&#xff1a;死的。只占用磁盘空间。 ——剧本。 进程&#xf…

服务(第三十三篇)Zookeeper集群 + Fafka集群

kafka是什么&#xff1f; 是一个分布式的基于发布/订阅模式的消息队列&#xff08;MQ&#xff0c;Message Queue&#xff09;&#xff0c;主要应用于大数据实时处理领域。 为什么需要消息队列&#xff1f; 主要原因是由于在高并发环境下&#xff0c;同步请求来不及处理&…

JavaScript 高级程序设计 - 第 8 章 理解对象 学习笔记

JavaScript 高级程序设计 - 第 8 章 理解对象 学习笔记 本章内容量挺大的&#xff0c;因此笔记的话我也会分成 3-4 个部分去写&#xff0c;想要理解的细一点&#xff0c;顺便之后回顾的时候不会看的套类。 本章主要就是了解一下和理解一下什么是对象&#xff0c;包括 Object …

一文读懂DEM数字地形“全家桶“(附5m 12.5m 30m 90m DEM下载)

在今年自然资源部发布的《实景三维中国建设技术大纲&#xff08;2021版&#xff09;》中&#xff0c;空间数据部分包括“数字高程模型 &#xff08;DEM&#xff09;、数字表面模型&#xff08;DSM&#xff09;、数字正射影像&#xff08;DOM&#xff09;、 真正射影像&#xff…