Vue使用elementUi的el-image图片初始化加载失败！

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

问题如下图：

原因是el-image的 :src=" " 在初始化时，图片路径由接口返回还未加载数据导致的问题，且第一次渲染失败不会再异步刷新。

解决办法： 在el-image中加上  v-if="imageData.src !== undefined" 判断，不是后端返回的话直接 src 处路径写死。

 

仅供参考~ : D

L_WalkingPig
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-image动态数据返回 图片加载失败问题
weixin_45108907的博客
02-04 1937
问题： 动态返回的数据，回显图片加载失败，使用了懒加载也不行，异步加载没有刷新 解决： 使用v-if，图片存在时再渲染 <el-image style="width: 100px; height: 100px" lazy v-if="add_form_dialog.img" :src="add_form_dialog.img" :preview-src-list="[add_f.
详解如何在vue项目中引入elementUI组件
08-28
在引入ElementUI组件之前，需要确保已经安装好了Vue的开发环境，并且已经初始化了Vue项目。可以使用以下命令初始化Vue项目： ``` vue init webpack itemname ``` 然后，运行以下命令来安装ElementUI： ``` npm i ...
Vue动态加载本地磁盘图片
qq_39691676的博客
01-02 7694
<el-image v-for=" item in urllist" :key="item.url" :src="require('C://tmp//'+item.url+'.png')" style="width: 100px;height:100px;display: block;margin-bottom: 20px" />
img标签动态绑定本地图片地址不生效
凉城玖的博客
05-25 1433
如果一个img标签要根据图片变量来动态跟换src图片链接，如果src链接是远程的服务器图片地址都是没有问题的，但是如果是本地路径直接写，是不会生效的。 解决办法：可以通过这种办法来解决-${require('@/assets/chat/file.png')} 这里el-image标签和普通的img标签没差别什么差别。 <el-image lazy :class="[file.resourceType === 3 ? 'fileImg' :
el-image本地图片不显示，提示加载失败
最新发布
我是小鹏呀的博客
05-29 1031
问题描述：el-image使用本地图片不显示，提示加载失败。
element ui 图片加载失败_2.ElementUI之图片懒加载无法显示的问题，求教。
weixin_34220317的博客
01-14 1235
在使用这个组件的时候，遇到了奇奇怪怪的Bug。页面出来了，但图片的懒加载功能却没出来，没有实现官网给出的效果。代码如下这是gourmet world页面11111export default {name: "GourmetWorld",data() {return {urls: ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa...
[UIImage imageNamed:@"icon.png"] 加载图片的问题
计算机学习园
06-18 1241
[UIImage imageNamed:@"icon.png"] 用上面的方法加载图片有问题。该方法即可以从bundle中读取图片。 这种方法在application bundle的顶层文件夹寻找由供应的名字的图象 。 如果找到图片，装载到iPhone系统缓存图象。那意味图片是(理论上)放在内存里作为cache的。因此如果图片资源多了或大了，此方式容易引起发生内存警告从而导致自动退出的问
element ui 或者 element-admin 模板 img 标签 图片不能正常显示或者资源不能正常加载问题
yssa1125001的博客
05-18 2240
引用项目内部的图片或者资源，总是显示不正常或者正常加载，解决办法： 用 require()包裹起来，如图： <el-image style="width: 100px; height: 100px" :src="courseInfo.cover" :fit="cover"></el-image> courseInfo:{ cover: require('@/assets/default.jpg') } 或者直接： <el-image style="width:
elementui表格的表头首次加载不显示的问题
weixin_44229267的博客
02-26 974
**网页检查元素，可以看见表头样式是display:none；如果表格不会出现纵向滚动条，一般改成block就行了；如果有纵向滚动条，滚动条占位会导致表格对不齐。不写block就行了，哈哈哈哈。代码如下 ** .el-table__header { display: table !important; } ...
vue+vant使用图片预览功能ImagePreview的问题解决
10-15
3. **在组件中使用**：在Vue组件中，你可以直接将图片数组绑定到`v-viewer`指令上，然后在适当的地方初始化或销毁预览实例。 ```html <img v-for="image in images" :key="image" :src="image" v-viewer /> ...
vue指令实现页面图片懒加载鼠标滚动图片开始加载
12-01
// 初始化操作，如设置占位图 const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // 图片进入视口，开始加载 loadImage(entry....
基于vue的懒加载插件实现图片或者其他资源进入可视区域后加载
08-12
本篇文章将详细探讨如何基于Vue.js实现一个懒加载插件，使得图片或其他资源仅在进入用户可视区域时才开始加载，从而减少页面初始化时的数据请求量，提升页面加载速度。 首先，我们要理解“懒加载”（Lazy Loading）...
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
11-26
在 `<script>` 部分，我们需要导入 cropperjs，并在组件的选项中初始化和配置 cropper 实例。这通常会在 `mounted` 生命周期钩子中完成。记得在 `methods` 对象中定义处理裁剪事件的方法，例如确定裁剪区域、保存...
vue中动态加载图片
wedding111的博客
07-02 2567
vue中加载图片不能直接动态改变图片地址，这样地址会被识别为字符串，需要使用require引入&lt;template lang="html"&gt;    &lt;section id="tableImg"&gt;        &lt;img class="bigImg" :src="defaultImg" alt=""&gt;        &lt
vue使用element-ui的el-image的src问题
絔宝的博客
10-04 5279
vue使用element-ui的el-image的src问题。vue静态获取本地资源图片文件。
vue中el-image的使用？？
泗水六年的博客
07-18 1995
vue中el-image的使用： <template> <main-area :title="title" class="fullfill" :buttonArray="buttonArray"> <div class="info-content"> <el-image :src="`${staticResourcePath}/img/签约成功.png`"></el-image&
elementUi中 el-image标签加载本地图片失败
weixin_44039043的博客
11-20 2553
elementUi中 el-image标签加载本地图片失败 图片地址需require引入 例如： 转载：https://blog.csdn.net/qq_38571305/article/details/104007131
vue实现动态切换图片src
crazywsp的博客
12-30 4019
通过计算属性搭配require实现。 功能： 定义一个定时器，每隔3秒随机生成一个文件名；通过计算属性根据文件名重新加载图片路径，从而实现定时随机切换图片的效果。 图片路径：/assets/images/， 图片名称分别为1.png、2.png …20.png。 代码： <template> <div> <el-image :src="getImageUrl"></el-image> </div> </template&g
element中el-image如何显示本地图片
热门推荐
一片天空
12-07 3万+
把正常img标签中的src="@/assets/logo.png"换成:src="require('@/assets/logo.png')"就可以了。
vue 怎么使用element-ui上传图片并预览
07-15
2. 创建一个上传组件，并初始化需要的数据，如图片列表和上传接口等。 ```vue <el-upload action="/your-upload-url" :on-success="handleSuccess" :file-list="fileList" :on-remove="handleRemove" ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值