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无线…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。 目录 …...
uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）
UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...
离线语音识别方案分析
随着人工智能技术的不断发展，语音识别技术也得到了广泛的应用，从智能家居到车载系统，语音识别正在改变我们与设备的交互方式。尤其是离线语音识别，由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力，广…...