element-ui中el-image加载图片自定义loading

原创 已于 2023-06-01 15:23:57 修改 · 3.2k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

于 2022-11-24 10:33:22 首次发布
这篇博客介绍了如何使用CSS自定义`.el-image__placeholder`类，为加载图片前设置背景图片，背景图片为`/assets/img/carbg.png`，并居中显示，背景大小设为50%，同时保持宽高100%填充。
部署运行你感兴趣的模型镜像

.el-image__placeholder是加载出图片前显示的div，代码如下

:deep(.el-image__placeholder) {
    background: url('@/assets/img/carbg.png') no-repeat 50% 50%;
    background-size: 50%;
    width: 100%;
    height: 100%;
}

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

ElementUI - ＜el-image＞ src 属性使用本地图片加载失败解决方案
🏆 前端领域优质创作者
06-07 6139
前言 如下代码所示，会造成加载失败： <el-image style="width:50px; height:50px;" src="../assets/banner.png" /> 解决方案 使用 require 引入即可。 <el-image style="width:50px; height:50px;" :src="require('../assets/banner.png')" /> ...
ElementUI - 全局loding加载自定背景图或颜色（指令方式）
🏆 前端领域优质创作者
05-10 2975
前言 ElementUI 组件文档：https://element.eleme.cn/#/zh-CN/component/loading 默认情况下，默认为白色半透明背景，想要自定义如下图所示效果： 解决方案 在当前页面加入以下代码。 .el-loading-mask{ background: red !important; /* background-image: url() */ } ...
el-image图片加载慢时，加个loading
凡尘
12-25 441
el-image图片加载慢时，加个loading。
element 点击按钮查看大图
alokka的博客
09-13 2006
产品提了这样一个需求——点击按钮查看图片，我们都知道 element-ui 中有点击图片查看大图功能，我们看源码就知道 image 组件运用了内部的 ImageViewer 组件，一看源码我们就知道这个 ImageViewer 组件就是个图片查看器，那么我们就可以直接引入这个 ImageViewer 内部组件，用 button 来触发就能完美的实现我们的功能 element-ui 源码位置： packages/image/src/main.vue <template> <div c
使用el-image返回了图片地址，但闪烁一下就不显示问题解决
Zach1Lavine的博客
05-26 635
解决element中el-image返回图片地址，但闪烁一下又不显示的问题
VUE-ElementUI 自定义Loading图操作
01-21
需求： element ui loading图只能使用自己的loading图， 但很多场景下，需要替换成自己的gif图 虽然文档中有些， element-loading-spinner=”el-icon-loading” 可指定自定义图 但经测试，也只是只能再elementui 图标库中的图， 不是我们想的那个自定义图类的意思。 自定义图方法： 1） 添加自定义elementUI loading样式 asserts下 新建CSS文件夹 及CSS文件比如myCss.css 再里面，写入自定义的element类CSS样式 .el-loading-spinner{ /*这个是自己想设置的 g
elementui loading自定义图片
weixin_43847807的博客
11-17 646
::v-deep .el-loading-spinner { background: url(./pengyuyan.jpg) no-repeat; background-size: 28px 28px; width: 100%; height: 100%; position: relative; margin-top: 0; top: 50%; left: 50%; transform: translateY(-14px); transform: translate
在数据加载时加入 Element-UI 的 Loading 组件
聪明不喝牛奶的博客
07-03 949
在数据加载时加入 Element-UI 的 Loading 组件 在开发过程中，小伙伴们一定都遇到过当你在一个页面跳转到数据详情页面的时候，发现这个数据量特别大的时候，页面在加载数据的时候需要很长一会的时间，跳转过去的时候会出现白屏不显示，这样就会显得非常的难受，会给用户造成体验感不好的错觉，那么怎么样能够更加平稳的过度过去呢？我翻看了elementUI 的手册 看到了loading 这个组件，可以完美的解决我们上述的问题，是页面跳转的时候显得更加的顺滑，增强用户的体验！ 废话不说，开整！ created
前端element-ui Loading全屏全局加载动画(路由跳转和拦截请求触发)及自定义Loading图标
Seven71111的博客
01-21 1万+
目录 自定义加载Loading图标效果图 基于封装axios请求的request.js实现 自定义Loading图标 集成Loading后的request.js完整代码 基于Vuex的方式实现全屏全局加载 官网element-ui的loading组件介绍 自定义加载Loading图标效果图 基于封装axios请求的request.js实现 未集成loading的request.js import axios from 'axios'; import {Messag...
Element-UI自学实践（二）
weixin_40017062的博客
08-24 1397
Element-UI自学实践
Element-UI自学实践（一）
weixin_40017062的博客
08-13 701
Element-UI自学实践
ElementUI的loading自定义图片
weixin_54757930的博客
12-01 1385
.el-loading-spinner{ /*这个是自己想设置的 gif 加载动图*/ background-image:url('../images/aboutLink_1.png'); background-repeat: no-repeat; background-size: 200px 120px; height:100px; width:100%; background-position:center; /*覆盖 element-ui 默认的 50% 因为此
使用elementui的Loading设置自己想要的图片或gif动画…
木得是的博客
07-26 3190
阅读使人充实，会谈使人敏捷，写作与笔记使人精确。——培根。
element-UI中的el-image加载图片自定义加载动画
v5666666的博客
09-29 8414
前面都有 在这个里面 简书 连接地址自行观看 拿到 在加载前和加载中是一个类名为el-image__placeholder的div标签，在加载后和加载出错后分别是一个div和img标签 .el-image__placeholder 是加载出图片前 显示的 可以加一个 loading 的图片 这里有loading地址 也可以用 c3 自己写一个 <style> /* 加载前 */ .el-image__placeholder { background: url('./loadingI
自定义element-ui loading 加载动画
聆听
02-07 1357
//在 app.vue 文件中设置 .el-loading-spinner { background-image:url('../assets/loading_images/loading.gif'); //加载动图 background-repeat: no-repeat; //设置背景图不重复 height:100%;//图片高度 background-position:center; //设置背景定位为居中 top:0; //覆盖element-ui默认的50%，因为此处.
elementui自定义loading图标
想好了再写！
07-11 3713
二、在main.js中引入mycss.css(注意此样式需要放在elementui样式后面)
VUE-ElementUI 自定义Loading图
热门推荐
10-13 1万+
需求： element ui loading图只能使用自己的loading图， 但很多场景下，需要替换成自己的gif图 虽然文档中有些， element-loading-spinner="el-icon-loading" 可指定自定义图 但经测试，也只是只能再elementui图标库中的图，不是我们想的那个自定义图类的意思。 自定义图方法: 1）添加自定义elementUI loading样式 as...
模仿京东首页DIV懒加载，根据滚动条来加载div
Cahier
10-16 3042
原理是先将需要展示内容的div单独提取出来，放到一个新的页面，在需要展示的时候，直接通过AJAX请求页面，然后展示，实现DIV懒加载，在数据多的时候可以将数据分成很多段，用户滚动到需要展示的位置在加载，大大提高打开网页的速度。 效果图： 1.在没有拉到底部的时候显示一个gif加上提示语 2.在滚动条拉到底部的时候，加载下一页内容 HTML： <div id="tiezi"...
利用 element-ui 中 el-image 组件实现，图片正在加载时的动画
weixin_46002095的博客
04-02 1551
【代码】利用 element-ui 中 el-image 组件实现，图片正在加载时的动画。
element-ui图片懒加载
最新发布
01-05
### Element-UI 中实现图片懒加载 在 Vue 项目中使用 Element-UI 实现图片懒加载可以显著提升页面性能，尤其是在处理大量图片展示时。为了实现这一功能，通常会结合 `v-lazy` 指令来完成。 #### 安装依赖库 除了 Element-UI 外，还需要安装一个专门用于懒加载的插件，比如 `vue-lazyload`： ```bash npm install vue-lazyload --save ``` #### 配置 lazy-load 插件 接着，在项目的入口文件（通常是 `main.js`）中引入并注册该插件： ```javascript import Vue from 'vue'; import { Image } from 'element-ui'; // 按需加载Image组件[^2] import VueLazyLoad from 'vue-lazyload'; Vue.component(Image.name, Image); Vue.use(VueLazyLoad, { preLoad: 1.3, error: '/static/error.png', loading: '/static/loading.gif' }); ``` #### 使用懒加载图像组件 最后，在模板里通过 `<el-image>` 组件配合自定义属性 `lazy` 来启用懒加载特性: ```html <template> <div class="example"> <!-- 单张图片 --> <el-image :src="imgUrl" lazy></el-image> <!-- 列表中的多张图片 --> <ul> <li v-for="(item,index) in imgList" :key="index"> <el-image :src="item.url" lazy></el-image> </li> </ul> </div> </template> <script> export default { data() { return { imgUrl: "https://placekitten.com/800/400", imgList:[ {"url":"https://placekitten.com/600/400"}, {"url":"https://placekitten.com/700/500"} ] }; } }; </script> ``` 上述代码展示了如何利用 Element-UI 的 `<el-image>` 和第三方库 `vue-lazyload` 结合起来创建具有懒加载特性的图片显示效果[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山楂树の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值