elementUI中的el-image 加载失败原因和解决方案

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量2w 收藏 6
点赞数 2
分类专栏： vue 文章标签： 微信 javascript html
原文链接：https://www.cnblogs.com/fengxin1998/p/13994333.html
版权

最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新：

解决办法：

1.给:src设置默认值，避免图片加载失败的情况
2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图片，否则不加载
3.vue项目error方法绑定once，为避免同一个失败链接无限触发error（加载失败后再次请求图片的方法）

夏目友人帐...
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
elementUI el-image图片加载失败解决
wusq的博客
06-30 1万+
使用el-image显示图片加载失败 代码： <el-image style="width: 100%; height:50px; margin:4px 5px 2px 5px;" src="../assets/logo1.png" /> 效果： 解决：src用里面加个require 代码： <el-image style="width: 100%; height:50px; margin:4px 5px 2px 5px;" :src=.
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-image 标签初始化失败之后 就会失去异步加载功能
疯小子
12-28 1557
element 框架的 el-image组件 在一开始加载失败之后会失去异步加载功能，再次赋值也无法加载。el-image标签采用的是懒加载模式，通过新建一个image对象来监听这个对象的加载事件。解决方法的原理就是通过刷新vue的组件和事件重新初始化el-image对象，初始化时会重新新建image对象，这时就能加载成功了，异步加载功能也会恢复。由于初始化时对象不能正常加载，自然也没有了异步加载的功能。2：使用单独更新页面元素的方式也是有效的。1：更改url完成之后强制更新页面元素。
前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）
weixin_65793170的博客
04-02 1212
Element UI 中，为了实现图片的大图预览功能，可以使用el-image组件配合el-image组件来完成。
element ui 图片加载失败_解决Element UI - el-image 图片初始化加载失败问题
weixin_31842821的博客
01-14 4388
最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新，(这个地方需要注意过这个问题的大佬解读下源码，为什么会出现这种情况)所以“加载失败”。试了很久，这个可能是el-image的bug吧，以后需要仔细看看源码怎么实现的。目前发现有两个解决办法，第一个就是在“:src” 里添加默认图片地址，避免渲染...
vue打包后el-image图片不出来
墨迹斑斑的老墙
12-17 1090
图片路径问题
Vue环境下el-image图片动态加载失败问题
zhou_xiaozhou的博客
03-29 7713
但是结果还是差强人意，后来发现问题在require里面必须是一个静态路径，不能是一个变量，最终解决办法是。只要用字符串与变量拼接的方式就可以解决，查了资料，本质上是静态资源跟动态资源的区别......最开始的需求类似上图，在v-for中实现图片显示，但是实际得到的效果是。查了以后发现，如果要实现动态加载图片，应该用require包裹住路径。
el-image图片加载失败时，自定义加载失败内容
2301_76868945的博客
07-19 3420
查看后端返回的数据发现为图片链接存放位置、名称不统一导致，有些存在data中，有些不是数组是string。将加载失败的图片统一为一张图，使用el-image的error 自定义加载失败的内容。渲染图片时出现加载失败的图片。
el-image图片加载失败,自定义图片
nihaokangzheng的博客
06-16 2205
定义俩图片地址, 一个imgSrc1准备正常从服务器获取图片, 失败后显示imgSrc。在imgSrc1 修改下, 错误地址, 即可显示加载失败后的图片。使用el-image, 加载图片失败后,自定义图片。修改错误imgSrc1地址以后。
vue3 element plus 中el-image本地图片加载失败，路径问题
qq_43378240的博客
09-12 1569
src那里要用require包起来，这样就行了。
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
qq_45706352的博客
03-15 3700
在 element 组件上使用相对路径时 webpack 不会对路径进行处理，导致请求了一个无效的路径。【附】：:src属性后面的字符串会被当做变量解析使用，而src属性后面的只会被当字符串使用。在网页中加载本地图片时，会出现图片加载失败的问题，但使用。（注意给 src 属性加 : ）
Nuxt v-bind绑定img src不显示的解决
01-21
问题： 使用v-for循环， :src=”item.url”，绑定图片无法显示，只能写成静态结构； 原因： 直接写成静态的，会经过webpack进行编译，从而得到打包后正确的图片真实路径。 如果你写成动态的，webpack就不会进行编译，原封不动的把’~/assets/img/home.png’ 放到你图片的src里面，’http://xxx.xxx.xxx/~/assets/i…’不存在这张图片！ 解决方法1： 把图片存在服务器，使用网络路径， 解决方法2： 使用require和相对路径引用图片 { src: require(../static/gzEducation/fl/1.
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
ElementUI中el-tree节点的操作的实现
10-15
主要介绍了ElementUI中el-tree节点的操作的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUi vue el-radio 监听选中变化的实例代码
01-19
elementUi vue el-radio 监听选中变化的实例代码如下所述： //change是radio-group标签的事件 <el v-model=radioSex change=changeHandler> <el class=radio label=man>男</el> <el class=radio label=woman>女...
微信个人号开发api接口-视频号矩阵接口-VIdeosApi
apivideos的博客
04-29 244
【代码】微信个人号开发api接口-视频号矩阵接口-VIdeosApi。
bpmn-js推荐几款常用的插件
飞云先生
04-30 127
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 953
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
表格隔行变色
weixin_54339833的博客
05-02 387
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
el-image加载失败
06-07
对于el-image加载失败的问题，有以下几种可能的原因和解决方案： 1. 图片链接错误：检查图片链接是否正确，是否存在拼写错误或其他错误。如果链接有问题，可以修复链接或更换正确的图片链接。 2. 图片服务器问题：检查图片服务器是否正常运行，或者是否出现了故障或网络问题。如果是服务器问题，需要修复服务器或更换其他可靠的图片服务器。 3. 图片格式不支持：检查图片格式是否符合el-image支持的格式，例如只支持JPEG、PNG等格式。如果图片格式不支持，需要将图片转换为支持的格式。 4. 图片大小问题：检查图片大小是否超出了el-image支持的大小范围，如果超过了，可以压缩图片大小或者使用其他图片。 5. el-image属性设置错误：检查el-image的属性设置是否正确，例如图片宽度、高度、填充模式等。如果属性设置错误，需要重新设置正确的属性。 希望以上解决方案能够帮助你解决el-image加载失败的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值