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无线…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么？它的作用是什么？ Spring框架的核心容器是IoC（控制反转）容器。它的主要作用是管理对…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林：一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好，未来的算法大神！ 在数据结构的世界里，“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的，它…...
WEB3全栈开发——面试专业技能点P7前端与链上集成
一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染（SSR）与静态网站生成（SSG） 框架，由 Vercel 开发。它简化了构建生产级 React 应用的过程，并内置了很多特性： ✅ 文件系…...
Cursor AI 账号纯净度维护与高效注册指南
Cursor AI 账号纯净度维护与高效注册指南：解决限制问题的实战方案 风车无限免费邮箱系统网页端使用说明|快速获取邮箱|cursor|windsurf|augment 问题背景 在成功解决 Cursor 环境配置问题后，许多开发者仍面临账号纯净度不足导致的限制问题。无论使用 16…...
NineData数据库DevOps功能全面支持百度智能云向量数据库 VectorDB，助力企业 AI 应用高效落地
NineData 的数据库 DevOps 解决方案已完成对百度智能云向量数据库 VectorDB 的全链路适配，成为国内首批提供 VectorDB 原生操作能力的服务商。此次合作聚焦 AI 开发核心场景，通过标准化 SQL 工作台与细粒度权限管控两大能力，助力企业安全高效…...