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

最新推荐文章于 2024-05-29 17:42:33 发布
最新推荐文章于 2024-05-29 17:42:33 发布
阅读量3.3k 收藏 2
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xlt_jbwkj/article/details/127421815
版权

在计算机非0即1的世界怎么会出现这种不确定的事情呢？把el-image的懒加载属性开启一下试试：

<el-image :lazy="true" :src="detail.avatar"></el-image>

要是一直显示加载失败，那请检查一下图片资源是否真的注入成功，本地静态资源图片可以通过require引入：

<el-image :src="require(`大佬，您的图片相对路径写到这里`)"></el-image>

HackerAC
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element ui 图片加载失败_解决Element UI - el-image 图片初始化加载失败问题
weixin_31842821的博客
01-14 4501
最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新，(这个地方需要注意过这个问题的大佬解读下源码，为什么会出现这种情况)所以“加载失败”。试了很久，这个可能是el-image的bug吧，以后需要仔细看看源码怎么实现的。目前发现有两个解决办法，第一个就是在“:src” 里添加默认图片地址，避免渲染...
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
element el-image 大图预览顺序出错和加载失败问题
qq_37768929的博客
07-07 3724
element el-image 大图预览顺序出错 el-image使用方法 <div class="img" v-for="(item,i) in imageList" :key="i" > <el-image style="width:100%;height:100%" :src="item" :alt="item" :lazy="true" :preview-src-list="imageList" /> </div&
Vue环境下el-image图片动态加载失败问题
zhou_xiaozhou的博客
03-29 8674
但是结果还是差强人意，后来发现问题在require里面必须是一个静态路径，不能是一个变量，最终解决办法是。只要用字符串与变量拼接的方式就可以解决，查了资料，本质上是静态资源跟动态资源的区别......最开始的需求类似上图，在v-for中实现图片显示，但是实际得到的效果是。查了以后发现，如果要实现动态加载图片，应该用require包裹住路径。
el-image本地图片不显示，提示加载失败
最新发布
我是小鹏呀的博客
05-29 852
问题描述：el-image使用本地图片不显示，提示加载失败。
el-image图片加载失败时，自定义加载失败内容
2301_76868945的博客
07-19 3950
查看后端返回的数据发现为图片链接存放位置、名称不统一导致，有些存在data中，有些不是数组是string。将加载失败的图片统一为一张图，使用el-image的error 自定义加载失败的内容。渲染图片时出现加载失败的图片。
elementUI中的el-image 加载失败原因和解决方案
热门推荐
xiaoyuer_2020的博客
03-07 2万+
最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新： 解决办法： 1.给:src设置默认值，避免图片加载失败的情况 2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图片，否则不加载 3.vue项目error方法绑定once，为避免同一个失败链接无限触发error（加载失败后再次请求图片的方法） ...
el-image图片加载失败,自定义图片
nihaokangzheng的博客
06-16 2482
定义俩图片地址, 一个imgSrc1准备正常从服务器获取图片, 失败后显示imgSrc。在imgSrc1 修改下, 错误地址, 即可显示加载失败后的图片。使用el-image, 加载图片失败后,自定义图片。修改错误imgSrc1地址以后。
vue3 element plus 中el-image本地图片加载失败，路径问题
qq_43378240的博客
09-12 1860
src那里要用require包起来，这样就行了。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
以上就是关于vue-cli3.0+element-ui上传组件el-upload的使用介绍。通过自定义这些属性和钩子函数，我们可以灵活地控制文件上传的过程，满足各种业务场景的需求。在实际开发中，还可以结合axios等HTTP库进行更复杂的...
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI是一款基于Vue.js的开源UI组件库，它提供了丰富的界面组件，如表格（el-table）、按钮、提示、下拉菜单等，极大地简化了Web前端开发过程。然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置...
vue打包后el-image图片不出来
墨迹斑斑的老墙
12-17 1519
图片路径问题
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
qq_45706352的博客
03-15 3787
在 element 组件上使用相对路径时 webpack 不会对路径进行处理，导致请求了一个无效的路径。【附】：:src属性后面的字符串会被当做变量解析使用，而src属性后面的只会被当字符串使用。在网页中加载本地图片时，会出现图片加载失败的问题，但使用。（注意给 src 属性加 : ）
el-image 标签初始化失败之后 就会失去异步加载功能
疯小子
12-28 1672
element 框架的 el-image组件 在一开始加载失败之后会失去异步加载功能，再次赋值也无法加载。el-image标签采用的是懒加载模式，通过新建一个image对象来监听这个对象的加载事件。解决方法的原理就是通过刷新vue的组件和事件重新初始化el-image对象，初始化时会重新新建image对象，这时就能加载成功了，异步加载功能也会恢复。由于初始化时对象不能正常加载，自然也没有了异步加载的功能。2：使用单独更新页面元素的方式也是有效的。1：更改url完成之后强制更新页面元素。
el-table-column 中的 el-image 无法正常显示图片
Alan_Walker688的博客
02-26 3374
解决 el-table-column 中的 el-image 无法正常显示图片的问题
Element el-image 加载本地图片
cimbala的博客
05-16 7942
代码： <el-image :src="require('@/static/iconlibrary/allorders.png')" fit="contain"></el-image> 加载失败问题：   如果页面没有显示图片，检查一下自己是不是按需引入Element组件，忘记在main.js里面引入Image组件。 import { Button,Image } from 'element-ui'; import 'element-ui/lib/theme-chalk/index
解决Vue中el-image加载图片失败问题，实现点击el-image中的图片自定义跳转页面
weixin_43732080的博客
03-17 4132
关于在el-image加载图片失败问题，以及实现通过点击图片跳转到自定义页面 router-link：可以帮助你跳转到指定的路径，path后：是你路由里配置的页面地址 我们使用数据绑定的方式 ：src 读取图片 1.在Vue的template中这么写： <div class> <!-- 我这里跳转到：http:localhost:8080/rankpage--&gt...
element-ui el-menu
07-27
Element-UI 是一个基于 Vue.js 的 UI 组件库，而 el-menu 是 Element-UI 中的一个组件，用于创建菜单导航。 el-menu 组件可以帮助我们快速构建垂直或水平的导航菜单。它提供了多种样式和布局选项，可以灵活地满足各种项目的需求。 el-menu 组件的主要属性包括： - mode：设置菜单的模式，可以是水平模式（horizontal）或垂直模式（vertical）。 - default-active：设置默认激活的菜单项，可以是菜单项的 index 属性或者 path 属性。 - unique-opened：设置是否只保持一个子菜单的展开状态。 - collapse：设置是否折叠菜单。 - router：设置是否开启路由模式，用于处理菜单项的跳转。 除了上述属性之外，el-menu 还提供了一些事件和方法，用于处理菜单的交互行为。可以通过监听事件或者调用方法来实现菜单项的点击、展开、收起等操作。 需要注意的是，el-menu 是 Element-UI 的一部分，使用前需要先安装 Element-UI，并在项目中引入相应的样式和组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值