el-image动态数据返回图片加载失败问题

最新推荐文章于 2024-07-10 15:35:27 发布

leoxiaoge

最新推荐文章于 2024-07-10 15:35:27 发布

阅读量2.4k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/github_37759996/article/details/118604048

版权

在遇到动态返回的图片数据无法正常显示，即使尝试了懒加载和异步加载依然失败的情况下，通过在img标签上使用v-if指令，仅在图片数据存在时渲染图片，可以成功解决图片加载问题。

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

在这里插入图片描述
问题：
动态返回的数据，回显图片加载失败，使用了懒加载也不行，异步加载没有刷新
解决：
使用v-if，图片存在时再渲染

<el-image
    style="width: 100px; height: 100px"
    lazy
    v-if="add_form_dialog.img"
    :src="add_form_dialog.img"
    :preview-src-list&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

leoxiaoge

关注关注

1
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue中实现图片懒加载的方法（二）

weixin_54145360的博客

11-14

1457

vue图片懒加载为什么组件内部直接写 img 会有卡顿现象？而动态创建的img 标签则很流畅，这是什么原因

element里面的el-image感觉有bug

Monster_Lukas的博客

06-08

1313

今天碰到了一个问题，table表格中的图片，会请求两次

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

Vue在使用el-image时显示加载失败问题

最新发布

Coludidi的博客

07-10

1111

在element ui 组件上使用相对路径，webpack并不会对路径进行处理（即为根目录下的images）。图片地址用 require 进行拉取。

Vue环境下el-image图片动态加载失败问题

zhou_xiaozhou的博客

03-29

9081

但是结果还是差强人意，后来发现问题在require里面必须是一个静态路径，不能是一个变量，最终解决办法是。只要用字符串与变量拼接的方式就可以解决，查了资料，本质上是静态资源跟动态资源的区别......最开始的需求类似上图，在v-for中实现图片显示，但是实际得到的效果是。查了以后发现，如果要实现动态加载图片，应该用require包裹住路径。

png图片旋转属性参数获取_前端性能优化之图片懒加载

weixin_39624461的博客

12-13

142

在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。为什么要进行图片懒加载我们先来看一下页面启动时加载的图片信息。如图所示，这个页面启动时加载了几十张图片(甚至更多)，而这些图片请求几乎是并发的，在 Chrome 浏览器，最多支持的并发请求次数是...

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

HackerAC的博客

10-20

3443

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

el-image图片加载失败时，自定义加载失败内容

2301_76868945的博客

07-19

4237

查看后端返回的数据发现为图片链接存放位置、名称不统一导致，有些存在data中，有些不是数组是string。将加载失败的图片统一为一张图，使用el-image的error 自定义加载失败的内容。渲染图片时出现加载失败的图片。

el-upload实现图片上传，将图片上传到后台，后台返回路径

ersorn

08-21

9758

完整代码如下： <template> <div>  <ul v-for="item in ruleForm.imgList" :key="item" class="el-upload-list el-upload-list--picture-card"> <li tabindex="...

vue本地项目配置图片加载失败_vue开发之图片加载不出来问题解决

weixin_39634052的博客

02-22

2826

在使用vue开发项目的时候，经常会遇到的一个问题就是：图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。一、项目打包完成后，打开整体空白1、路径问题原因在vue+webpack的项目中，项目打包之后的css和js的引用路径是绝对路径，项目部署之后会将静态当成根目录，就造成了文件引用路径的错误。解决办法通过修改配置文件，将绝对路径改为相对路径。具体操作如下：1.vue-cli 3.0...

vue el-upload 上传图片列表校验不通过后多删除了一张图片

且听风吟的博客

09-06

1867

vue el-upload 上传图片列表校验不通过后多删除了一张图片

el-image无法显示从本地服务器请求的图片——原因之一及解决办法

Yukinoshita_kino的博客

05-29

8307

最近的项目需求，针对不同的类型显示不同的图片

el-image图片加载失败,自定义图片

nihaokangzheng的博客

06-16

2671

定义俩图片地址, 一个imgSrc1准备正常从服务器获取图片, 失败后显示imgSrc。在imgSrc1 修改下, 错误地址, 即可显示加载失败后的图片。使用el-image, 加载图片失败后,自定义图片。修改错误imgSrc1地址以后。

el-image 标签初始化失败之后就会失去异步加载功能

疯小子

12-28

1767

element 框架的 el-image组件在一开始加载失败之后会失去异步加载功能，再次赋值也无法加载。el-image标签采用的是懒加载模式，通过新建一个image对象来监听这个对象的加载事件。解决方法的原理就是通过刷新vue的组件和事件重新初始化el-image对象，初始化时会重新新建image对象，这时就能加载成功了，异步加载功能也会恢复。由于初始化时对象不能正常加载，自然也没有了异步加载的功能。2：使用单独更新页面元素的方式也是有效的。1：更改url完成之后强制更新页面元素。

el-image数据回显

m0_53412031的博客

03-19

396

如果要大图显示需要加括号

Vue 使用element-UI 上传图片及图片回显

皮皮的博客

08-24

3912

问题描述：将后台接口返回的图片，回显到页面 1、html代码 <el-form-item label="房间图片:" prop="images"> <el-upload :action="action" list-type="picture-card" :accept="accept" :auto-upload="true" :limit="imgLimit" :multiple="isMultiple" :file-list="form.images" :

vue+elementui实现图片上传回显，不能预览来砍我

qq_30815659的博客

12-19

1462

找了半天找到一篇可以预览的代码： vue + element-UI 实现图片嵌在表单里，图片和表单一起上传_hongyuancao的博客-CSDN博客_vue和element实现图片上传如下图，需求要实现点击一个按钮，可以让表单的内容和图片一起上传，只请求后台一次！思路： 1.让图片formData放在表单formData中一起上传，实现不了，目前前台获取不到图片的本地地址； 2.让图片的 vm.$refs.upload.submit() 放在post上传表单的函数下上传，这样会请求后台两次，

异步加载图片提高速度

zion--6135的博客

10-08

475

在Cocos线程中 1.加载图片 Director::getInstance()->getTextureCache()->addImageAsync( "xxx.png", CC_CALLBACK_1(LoadingpngCallBack, this)); 2.回调函数 sem_t semTest; void preLoadingpngCallBack(cocos2d::Texture2D *texture) { Texture2D *test = Director::.

el-image图片加载失败

05-27

el-image 图片加载失败可能有多种原因，以下是一些可能的解决方法： 1. 确认图片链接是否正确，尝试在浏览器中打开链接查看是否能够正常显示图片。 2. 确认图片是否存在于服务器上，如果图片不存在，可以尝试重新...

el-image动态数据返回 图片加载失败问题

el-image动态数据返回图片加载失败问题