vue img标签图片加载时 闪烁
//js
data(){
return{
img_url: '',
}
},
created(){
//请求数据,并给图片赋值url
ajax.get(http_url)
.then(res=>{
this.img_url = res.data.img_url;
})
.catch(error=>{
})
}
<-- html -->
<div>
<img :src="img_url">
</div>
绑定的 :src=“img_url” 初次加载闪烁 然后在父元素添加了v-cloak
加载时 在图片正常显示之前还是会显示加载出错的默认图片
因为此时的img_url为空 所以就在父元素 加上 v-if=“img_url” 完美解决
<div v-if="img_url">
<img :src="img_url">
</div>
或
<div v-if="img_url">
<img :src="img_url" :onerror=“defaultImg”>
</div>
vue img标签图片加载时 闪烁的更多相关文章
- vue开发之图片加载不出来问题解决
在使用vue开发项目的时候,经常会遇到的一个问题就是:图片加载不出来.下面是我总结的几种图片加载不出来的情况及解决办法. 一.项目打包完成后,打开整体空白 1.路径问题 原因 在vue+webpack ...
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- 通过特殊处理 Resize 事件解决 WinForm 加载时闪烁问题的一个方法
WinForm 上放置的控件多了或者有大背景图,窗体加载时就会闪烁,对于一般的闪烁,设置 DoubleBuffer=True或许有一点改善,要立竿见影的解决可以重载 CreateParams 使用 W ...
- <img> 标签 图片加载失败时候处理方案
应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...
- vue中img图片加载中以及加载失败显示默认图片问题
加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...
- vue中的图片加载与显示默认图片
HTML: <div class="content-show-img"> <div class="show-img"> <img ...
- WP 图片加载时显示加载中
private BitmapImage srcimage = new BitmapImage(); public MainPage() { InitializeComponent(); progres ...
- JS图片加载时获取图片宽高信息
; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...
- Vue优化首屏加载
背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...
随机推荐
- TX2-static-dhcp-network
前言 之前是使用私有的镜像而不是按照nvidia官网中JetPack3.2套件的镜像对TX2板子进行刷机,刷机之后发现网络不能正常连接,即使已经连接了有线网口,经过大师的指点才终于明白了其中的一点点奥 ...
- python linecache模块读取文件的方法
转自: python linecache模块读取文件 在Python中,有个好用的模块linecache,该模块允许从任何文件里得到任何的行,并且使用缓存进行优化,常见的情况是从单个文件读取多行. l ...
- 【集成学习】sklearn中xgboost模块的XGBClassifier函数
# 常规参数 booster gbtree 树模型做为基分类器(默认) gbliner 线性模型做为基分类器 silent silent=0时,不输出中间过程(默认) silent=1时,输出中间过程 ...
- JAVA基础部分复习(六、常用关键字说明)
/** * JAVA中常用关键字复习 * final * finalize * finally * * @author dyq * */ public class KeyWordReview exte ...
- linux php.ini文件没有指向 不生效
phpinfo下查看: 命令行下查看 :php -i | grep "Loaded Configuration File" 解决: 使用命令去追踪错误: strace /usr/ ...
- java-抽象类的特点
1.抽象类和抽象方法必须用abstract关键字修饰. - abstract class 类名() - public abstract void eat(); 2.抽象类不一定有抽象方法,有抽象方法的 ...
- Damped Track 阻尼跟随
Damped Track 阻尼跟随 https://www.youtube.com/watch?v=pd1od5WPCUw 2个网格及对应的2个空对象Z轴方向网格:{O.up}; 上方园孔把手中间放空 ...
- hdu2461 Rectangles 线段树--扫描线
You are developing a software for painting rectangles on the screen. The software supports drawing s ...
- export的变量另开一个终端失效解决方法
有时候,我们需要把一个export的变量全局话,否则每开一个终端又需要重新export,很是麻烦 首先直接export某个变量的话就只能在当前子终端生效,另开一个终端就失效了 如果修改.bash_pr ...
- linux查看网络信息命令
#遇到一条很长的命令怎么办,想换行的时候在末尾增加\符号就可以换行继续输入命令了 #在ifconfig内容中找出ip [root@bogon ~]# ifconfig ens33|grep " ...