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无线…...
openpilot自动驾驶系统终极指南：从入门到实战的完整教程
openpilot自动驾驶系统终极指南：从入门到实战的完整教程 【免费下载链接】openpilot openpilot is an operating system for robotics. Currently, it upgrades the driver assistance system on 300 supported cars. 项目地址: https://gitcode.com/GitHub_Trend…...
taskwarrior-tui键盘绑定完全手册：成为效率达人的秘密武器
taskwarrior-tui键盘绑定完全手册：成为效率达人的秘密武器 【免费下载链接】taskwarrior-tui taskwarrior-tui: A terminal user interface for taskwarrior 项目地址: https://gitcode.com/gh_mirrors/ta/taskwarrior-tui taskwarrior-tui是一款功能强大的终…...
天地协同：卫星如何成为5G物联网“组合拳”的关键一环
未来的物联网连接格局并非“卫星取代地面”或“地面压制卫星”的零和博弈，而是一个基于场景需求、优势互补的“组合式”解决方案。卫星连接的价值在于补充和增强更广泛的连接组合，与5G等地面蜂窝网络协同工作，共同构建一张无处不在、经济高效…...
常见 PE 启动盘
文章目录常见 PE 启动盘一、强烈推荐 纯净无捆绑类二、功能强大 可选推广类三、老牌经典 捆绑较多类四、官方原版常见 PE 启动盘 这里整理了一份常见的PE启动盘大全，按纯净度和口碑分类，并附上官网或可靠的下载渠道。 一、强烈推荐 纯净无捆绑类 这…...
本地RAG系统实战：基于开源模型构建私有知识库问答应用
1. 项目概述与核心价值最近在折腾本地大模型应用的时候，发现了一个挺有意思的项目，叫Awareness-Local。这名字听起来有点玄乎，但说白了，它就是一个帮你把本地文件（比如PDF、Word、TXT，甚至图片里的文字&…...
嵌入式Linux系统固化：从启动卡制作到eMMC克隆的工程实践
1. 项目概述：从“启动卡”到“系统固化”的工程实践在嵌入式开发、工业控制、边缘计算乃至一些特定的服务器运维场景里，我们经常会遇到一个看似基础却至关重要的需求：如何将一个完整的Linux操作系统，从一张临时的启动介质…...
扬州尊客酒店用品厂：十一年用心，值得信赖
扎根扬州，十一年用心：一家把 “靠谱” 刻进骨子里的酒店用品厂在扬州生态科技新城，有这样一家企业：没有花哨噱头，不玩虚头宣传，只埋头做一件事 —— 把酒店客房里那些不起眼的一次性用品，做到让…...
AI教材写作神器！低查重AI工具，一键生成符合标准的专业教材！
许多教科书编写者常常会面临这样的困扰：在认真打磨正文内容的同时，配套资源的缺乏却影响到了整体的教学效果。设计有难度的课后练习题时，脑海中却没有多样的创意；想要制作生动的教学课件，却苦于缺乏技术支持࿱…...
c++ 端口扫描程序实现案例
第一、原理端口扫描的原理很简单，就是建立socket通信，切换不通端口，通过connect函数，如果成功则代表端口开发者，否则端口关闭。所有需要多socket程序熟悉，本内容是在window环境下的第二、单线程实现方式123…...
3大核心解决方案：彻底解决戴尔笔记本散热与噪音平衡难题
3大核心解决方案：彻底解决戴尔笔记本散热与噪音平衡难题 【免费下载链接】DellFanManagement A suite of tools for managing the fans in many Dell laptops. 项目地址: https://gitcode.com/gh_mirrors/de/DellFanManagement DellFanManagement是一款专为戴…...