Element-ui图片懒加载

发布时间：2024年01月11日

?

?核心代码

<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>
	//公共--内容-主要用于图片懒加载 start
	var 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-fitstringfill / contain / cover / none / scale-down-
alt原生 altstring--
referrer-policy原生 referrerPolicystring--
lazy是否开启懒加载boolean—false
scroll-container开启懒加载后，监听 scroll 事件的容器string / HTMLElement—最近一个 overflow 值为 auto 或 scroll 的父元素
preview-src-list开启图片预览功能Array—-
z-index设置图片预览的 z-indexNumber—2000
initial-index图片预览初始图片indexNumber—-

事件说明

事件名称说明回调参数
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>

文章来源:https://blog.csdn.net/cplvfx/article/details/135528198
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章