Element-ui图片懒加载
核心代码
<el-image src="https://img-blog.csdnimg.cn/direct/2236deb5c315474884599d90a85d761d.png" alt="我是图片" lazy><img slot="error" src="https://img-blog.csdnimg.cn/direct/81bf096a0dff4e5fa58e5f43fd44dcc6.png" alt="加载失败">
</el-image><el-image src="图片路径" alt="我是图片" lazy><img slot="error" src="错误图片路径" alt="加载失败">
</el-image>重点
该代码必须在vue下才能正常运行。 如果你的项目是Vue脚手架搭建，请自动绕过。
如果你是的Element-ui是引入的，操作方式如下
<!DOCTYPE html>
<html>
<head><title>橙-极纪元JJY.Cheng</title><meta name="keywords" content="橙-极纪元JJY.Cheng"><meta name="description" content="橙-极纪元JJY.Cheng"><script src="/StaticFile/js/common/vue2.6.14.min.js"></script><script src="/StaticFile/js/common/element-ui2.15.12/element-ui2.15.12.js"></script>
</head>
<body><div class="QXUI-Box" id="CommonContentVueObj"><el-image src="https://img-blog.csdnimg.cn/direct/2236deb5c315474884599d90a85d761d.png" alt="我是图片" lazy><img slot="error" src="https://img-blog.csdnimg.cn/direct/81bf096a0dff4e5fa58e5f43fd44dcc6.png" alt="加载失败"></el-image></div><script>//公共--内容-主要用于图片懒加载 startvar CommonContentVueObj = new Vue({el: '#CommonContentVueObj',data: { },created: function () {},methods: {}});//公共--内容-主要用于图片懒加载 end</script>
</body>
</html>文档说明
地址：
Element - The world's most popular Vue UI framework
标签属性说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| src | 图片源，同原生 | string | — | - |
| fit | 确定图片如何适应容器框，同原生 object-fit | string | fill / contain / cover / none / scale-down | - |
| alt | 原生 alt | string | - | - |
| referrer-policy | 原生 referrerPolicy | string | - | - |
| lazy | 是否开启懒加载 | boolean | — | false |
| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
| preview-src-list | 开启图片预览功能 | Array | — | - |
| z-index | 设置图片预览的 z-index | Number | — | 2000 |
| initial-index | 图片预览初始图片index | Number | — | - |
事件说明
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| load | 图片加载成功触发 | (e: Event) |
| error | 图片加载失败触发 | (e: Error) |
Slots占位说明
| 名称 | 说明 |
|---|---|
| placeholder | 图片未加载的占位内容 |
| error | 加载失败的内容 |
如下面代码中的
<el-image src="图片路径" alt="我是图片" lazy><img slot="placeholder" src="加载中的图片路径" alt="加载中..."><img slot="error" src="错误图片路径" alt="加载失败">
</el-image>相关文章：
Element-ui图片懒加载
核心代码 <el-image src"https://img-blog.csdnimg.cn/direct/2236deb5c315474884599d90a85d761d.png" alt"我是图片" lazy><img slot"error" src"https://img-blog.csdnimg.cn/direct/81bf096a0dff4e5fa58e5f43fd44dcc6.png&quo…...
Linux系统——DNS解析详解
目录 一、DNS域名解析 1.DNS的作用 2.域名的组成 2.1域名层级结构关系特点 2.2域名空间构成 2.3域名的四种不同类型 2.3.1延伸 2.3.2总结 3.DNS域名解析过程 3.1递归查询 3.2迭代查询 3.3一次DNS解析的过程 4.DNS系统类型 4.1缓存域名服务器 4.2主域名服务器 4…...
初识Ubuntu
其实还是linux操作系统 命令都一样 但是在学习初级阶段，我还是将其分开有便于我的学习和稳固。 cat 查看文件 命令 Ubuntu工作中经常是用普通用户，在需要时才进行登录管理员用户 sudn -i 切换成管理用户 我们远程连接时 如果出现 hostname -I没有出现…...
Casper Network (CSPR）2024 年愿景：通过投资促进增长
Casper Network (CSPR）是行业领先的 Layer-1 区块链网络之一，通过推出了一系列值得关注的技术改进和倡议，已经为 2024 年做好了准备。 在过去的一年里，Casper Network (CSPR）不断取得里程碑式的进展，例如推…...
《MySQL系列-InnoDB引擎06》MySQL锁介绍
文章目录 第六章 锁1 什么是锁2 lock与latch3 InnoDB存储引擎中的锁3.1 锁的类型3.2 一致性非锁定读3.3 一致性锁定读3.4 自增长与锁3.5 外键和锁 4 锁的算法4.1 行锁的三种算法4.2 解决Phantom Problem 5 锁问题5.1 脏读5.2 不可重复读5.3 丢失更新 6 阻塞7 死锁 第六章 锁 开…...
获取多个PDF文件的内容并保存到excel上
# shuang # 开发时间：2023/12/9 22:03import pdfplumber import re import os import pandas as pd import datetimedef re_text(bt, text):# re 搜索正则匹配 包含re.compile包含的文字内容m1 re.search(bt, text)if m1 is not None:return re_block(m1[0])return…...
深入了解网络流量清洗--使用免费的雷池社区版进行防护
随着网络攻击日益复杂，企业面临的网络安全挑战也在不断增加。在这个背景下，网络流量清洗成为了确保企业网络安全的关键技术。本文将探讨雷池社区版如何通过网络流量清洗技术，帮助企业有效应对网络威胁。 ![] 网络流量清洗的重要性&#x…...
)
【FFMPEG应用篇】基于FFmpeg的转码应用(FLV MP4)
方法声明 extern "C" //ffmpeg使用c语言实现的，引入用c写的代码就要用extern { #include <libavcodec/avcodec.h> //注册 #include <libavdevice/avdevice.h> //设备 #include <libavformat/avformat.h> #include <libavutil/…...
LInux初学之路linux的磁盘分区/远程控制/以及关闭图形界面/查看个人身份
虚拟机磁盘分配 hostname -I 查看ip地址 ssh root虚拟就ip 远程连接 win10之后才有 远程控制重新启动 reboot xshell 使用（个人和家庭版 免费去官方下载） init 3 关闭界面 减小内存使用空间 init 5 回复图形界面 runlevel显示的是状态 此时和上…...
Netty 介绍、使用场景及案例
Netty 介绍、使用场景及案例 1、Netty 介绍 https://github.com/netty/netty Netty是一个高性能、异步事件驱动的网络应用程序框架，用于快速开发可扩展的网络服务器和客户端。它是一个开源项目，最初由JBoss公司开发，现在由社区维护。Netty的…...
小游戏选型(一):游戏化设计助力直播间互动和营收
一、社交直播间小游戏火爆 大家好，作为一个技术宅和游戏迷，今天来聊聊近期爆火的社交直播间小游戏的潮流。喜欢冲浪玩社交产品的小伙伴会发现，近期各大平台都推出了直播间社交小游戏，直播间氛围火爆，小游戏玩法简单&a…...
社区嵌入式服务设施建设为社区居家养老服务供给增加赋能
近年来，沈阳市浑南区委、区政府牢记在辽宁考察时的重要指示精神，认真践行以人民为中心的发展思想，聚集“一老一小”民生关切，统筹推进以社区为骨干结点的养老服务探索实践。围绕“品质养老”民生服务理念，针对社区老年…...
SpringBoot请求参数加密、响应参数解密
SpringBoot请求参数加密、响应参数解密 1.说明 在项目开发工程中，有的项目可能对参数安全要求比较高，在整个http数据传输的过程中都需要对请求参数、响应参数进行加密，也就是说整个请求响应的过程都是加密处理的，不在浏览器上暴…...
Mysql适配国产化数据库人大金仓冲突记录
1、mysql中查询中如果使用双引号，在人大金仓数据库中不支持，需改为单引号 例如： select 字段A，字段B，字段C from tableA where 字段A "1" 改为： select 字段A，字段B，字段…...
在微服务架构中认证和授权的那些事儿
在微服务架构中认证和授权是最基础的服务能力，其中这一块行业类的标准就是OAuth2 和 SSO ，而OAuth2 和 SSO 可以归类为“用户管理和身份验证”工具，OpenID Connect 1.0是 OAuth 2.0 协议之上的一个简单身份层。 Part.1 认识OAuth 2.0 OAuth…...
Git使用统一规范
为什么要统一git使用的风格？ 统一的风格使我们在工作的时候无需考虑工作流程上该如何去做的问题，按照一个风格去做就好了每个人风格不同，格式凌乱，查看很不方便commit没有准确的message，后续难以追踪问题 git messag…...
如何在前端优化中处理大量的图像资源？
在前端优化中，处理大量的图像资源是一项重要的任务。由于图像占据了网站带宽的大部分，因此优化图像可以显著提高网站的性能和用户体验。下面将介绍一些在前端优化中处理大量图像资源的常见方法。 一、压缩图像 压缩图像是减少图像文件大小和优化图像的…...
【MYSQL】性能相关
SQL 语句的性能分析是一个非常重要的任务，尤其是在处理大数据时。下面是一些常用的 SQL 性能分析方法： 执行计划: 使用 EXPLAIN 命令来查看 SQL 语句的执行计划。这可以帮助你了解查询是如何被数据库执行的，从而发现可能的性能瓶颈。 注意&…...
【Jmeter之get请求传递的值为JSON体实践】
Jmeter之get请求传递的值为JSON体实践 get请求的常见传参方式 1、在URL地址后面拼接，有多个key和value时，用&链接 2、在Parameters里面加上key和value 第一次遇到value的值不是字符串也不是整型，我尝试把json放到value里面࿰…...
（1）(1.13) SiK无线电高级配置（六）
文章目录 前言 15 使用FTDI转USB调试线配置SiK无线电设备 16 强制启动加载程序模式 17 名词解释 前言 本文提供 SiK 遥测无线电(SiK Telemetry Radio)的高级配置信息。它面向"高级用户"和希望更好地了解无线电如何运行的用户。 15 使用FTDI转USB调试线配置SiK无线…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
uniapp 开发ios， xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
uniapp 字符包含的相关方法
在uniapp中，如果你想检查一个字符串是否包含另一个子字符串，你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的，但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时，需要使用外部低速晶振...
6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础
第三周 Day 3 🎯 今日目标 理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...