elementUI中tabs切换el-image的lazy不加载

最新推荐文章于 2024-06-21 16:53:38 发布

倔强的蜗牛@

最新推荐文章于 2024-06-21 16:53:38 发布

阅读量2.5k

点赞数 1

文章标签： elementui html

本文链接：https://blog.csdn.net/yuanfanlove/article/details/119958869

版权

本文讲述了如何在 tabs 切换时，确保使用 lazy 加载的 el-image 图片在切换到当前激活页面时正确显示。解决方案是：初次加载不在可视区域的内容需要主动请求，同时为图片设置随机 key 避免懒加载失效。

摘要由CSDN通过智能技术生成

问题描述：当tabs切换不在当前的activename时用了el-image的lazy加载图片，此时点击tabs到当前列表时，图片是显示不出来的

原因是：因为默认的是展示第一个tabs的内容，那么其他tabs的内容如果用了lazy但是第一次加载不在可是区域那么就不加载，需要在改tabs页签里重新调取接口，且给el-image一个随机值，避免懒加载不加载，：key="随机值"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

倔强的蜗牛@

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vu-element-ui img src 路径为assets 时加载动态图片失效的多种情况分析

chpswg的专栏

11-04

1584

项目需要基于当前天气类别，显示对应的天气符号，为img的src属性绑定，其中图片放在目录assets下，发现以下几种情况 1）在代码中require必须用computed而不是method 如下图，在method getIcon1中，为src 绑定 method getIcon1，getIcon1通过require引入图片，测试无法获取图片解决方法是将method 变为computed计算属性，可以获取成功（既可以用相对路径也可以用绝对路径） 2）通过data引入时，必须在...

Vue解决echart在element的tab切换时显示不正确（现在已经不能用lazy了）

前端李小白的博客

08-27

4829

在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。网上真的是太多太多太多坑了，服了，各种能不能用的都不先自己测试一下再贴上去，真心服了这些人。本来element tabs里面有个很好解决的办法就是在tab-pane添加上lazy='true’...

参与评论您还未登录，请先登录后发表或查看评论

elemenUI选项卡中懒加载图片不显示

liuguochao1024的博客

04-27

1155

现象：第三个选项卡中有图片懒加载，之后点击第三个不显示图片解决方案：给第三个选项卡中的图片加一个v-if判断条件是选项卡的v-model值等于当前选项卡的name ...

el-image开启懒加载或使用vue-lazyload有时候图片懒加载无效，一定要页面滚动才会展示

山有木兮木有枝心悦君兮君不知

10-13

6747

问题场景：在一个列表中，用el-image来显示图片，并开启懒加载，但前面的图片（如列表的第一、二张图片）需要页面滚动才会显示，明明图片是在浏览器的可是窗口内。解决方案：这一般是因为在v-for遍历的时候，:key被设置成了index下标 <ul> <li v-for="(item,index) in imgList" :key="index"> // 这里如果key的值是index，那每次分页,key的值就又是从0开始 <img

elementUI 使用el-image图片组件的问题

最新发布

weixin_39725702的博客

06-21

234

elementUI组件，使用el-image有时候加载不出图片，显示了默认图

el-table里面的el-image的lazy属性问题

schumyxp的专栏

06-02

1895

如果你不确定你的scroll-container的值应该写什么，就可以把里面的内容拿出来，用document.querySelector试一下，比如我的，就要试一下document.querySelector('#listTable .el-table__body-wrapper')，如果看到找到的div就是我们要的那个，就说明你找对了。但是这个时候，如果里面用到了el-image，会发现如果设置了lazy，也就是懒加载，图片是不会显示的。查了很多现成的文档，也问了ChatGPT，都没有好的答复。

关于el-image 懒加载无效问题

Vslong的博客

07-29

3787

项目场景：照片墙点名需要用到大量的照片问题描述：懒加载失效，只会显示当前窗口的滑动后图片不加载。或者图片全加载原因分析：组件找到了最近一个overflow值为auto或scroll的元素，并且绑定了scroll-container设置滚动容器，分析组件渲染和 css 出错了解决方案：将组件v-for的:key的值由 index 换成唯一id值将css中： overflow-x:hidden; overflow-y:auto; 换成 overflow: au...

element ui中tabs页面组件切换没有加载

qq_42628504的博客

11-14

3408

开发中遇到了一个问题就是我使用element ui中的tabs组件时候，每一个tab内嵌套了一个组件页面，但是我发现当切换之后，生命周期都没有走，页面的方法也没有触发三个tabs 中放了三个页面组件只是第一次页面加载进来触发了，后期切换都不能触发解决方法就是可以采用 tabs的name和每一个组件的隐藏状态同名，并且每一个组件的隐藏状态值都是tabsArr里面的值,并且放在tabsArr里面当切换之后对应handleClick方法会判断当前点击的页面name和tabsArr对象里面哪一个属性名

element ui 图片加载失败_2.ElementUI之图片懒加载无法显示的问题，求教。

weixin_34220317的博客

01-14

1245

在使用这个组件的时候，遇到了奇奇怪怪的Bug。页面出来了，但图片的懒加载功能却没出来，没有实现官网给出的效果。代码如下这是gourmet world页面11111export default {name: "GourmetWorld",data() {return {urls: ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa...

vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头

前端技术的学习整理

05-22

3万+

表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：<el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...

element组件---Form

weixin_45343878的博客

08-07

1035

Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框...

Element-UI组件之表单Form

TwentyOne__的博客

07-03

5472

Element-UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制 Radio 单选框基础用法 &...

Hexo-Next 博客搭建

热门推荐

qq_37828104的博客

05-16

9万+

整理网上的 Next 优化方法，外加写一份文章感觉博客还行，不再羡慕别人的主题了特效全开，跟开了吃鸡一样，电脑呼呼的看了下建站时间，花了 23 天整，为了一个工具，感觉血亏

解决element ui中tabs组件切换没有加载对应页面方法

qq_42628504的博客

11-14

3902

解决element ui中tabs组件切换没有加载对应页面方法 <template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in tabsArr" :key="index" :label="item.label" :name="

elementui table 里套el-image 列表数据过多导致图片无法加载

weixin_42400319的博客

07-27

539

如果加了lazy就出现图片空白。

Element-ui el-image图片时而加载失败时而加载成功

HackerAC的博客

10-20

3442

Element-ui el-image图片时而加载失败时而加载成功的解决建议

element ui中el-image不显示图片

Cooper的博客

04-24

3121

错误方式： <el-image src="src/assets/1.png"></el-image> 正确方式加入require 注意这时src前要加： <el-image :src="require('@/assets/1.png')"></el-image>

vue 实现 el-select 下拉选项的懒加载

ngd-b的博客

06-29

5285

下拉选择是常用的用户交互选择的操作;常用固定选择项或者动态渲染选择项. 实际项目中存在数据量大,一次性渲染很多数据会造成下拉卡顿的问题, 通过滚动懒加载,逐步增加下拉选项.

Element中tabs标签，网页一直加载不出来

weixin_44492696的博客

09-20

860

Element中Tabs标签一致加载不出来的解决办法 https://www.jianshu.com/p/393c70275773

vue3+ts+elementUI el-tabs切换时缓存数据

06-08

你可以使用 Vue.js 的 keep-alive 组件来缓存数据。将你想要缓存的组件包裹在 keep-alive 组件中，当组件被切换时，它的状态会被保留，直到下一次被激活。例如，如果你想缓存一个 el-tabs 下的 tab 组件，你可以这样写： ```vue <template> <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1" name="tab1"> <keep-alive> <component-a /> </keep-alive> </el-tab-pane> <el-tab-pane label="Tab 2" name="tab2"> <keep-alive> <component-b /> </keep-alive> </el-tab-pane> </el-tabs> </template> ``` 这样，当你在 Tab 1 和 Tab 2 之间切换时，组件 component-a 和 component-b 的状态会被保留。