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 ...
随机推荐
- DQN-深度Q网络
深度Q网络是用深度学习来解决强化中Q学习的问题,可以先了解一下Q学习的过程是一个怎样的过程,实际上就是不断的试错,从试错的经验之中寻找最优解 关于Q学习,我看到一个非常好的例子,另外知乎上面也有相关的 ...
- tarfile — Read and write tar archive files
参考: https://docs.python.org/2/library/tarfile.html http://www.jianshu.com/p/bbad16822eab #解压文件tarfil ...
- 九度OJ1036-空缺数字计算-暴力破解
题目1036:Old Bill 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3748 解决:2053 题目描述: Among grandfather's papers a bill wa ...
- Java中如何正确的将byte[]数组转化为String类型?
很多人在编程时,总是喜欢用一下方法将数组转为字符串:(a为byte数组) String s=a.toString(); 可是每次返回的时候,新手看来返回的结果是乱码,比如说我,写RSA算法时,没有注意 ...
- opencv3中SurfFeatureDetector、SurfDescriptorExtractor、BruteForceMatcher的使用
opencv2中SurfFeatureDetector.SurfDescriptorExtractor.BruteForceMatcher在opencv3中发生了改变.具体如何完成特征点匹配呢?示例如 ...
- CentOS7源码安装qbittorrent最新版本
CentOS的软件 yum 里 yum search qbittorrent yum info qbittorrent 找到的是3.37版本 官网最新的是4.12版本.但需要源码安装: 官网下载最新版 ...
- 莫队算法 [国家集训队]小Z的袜子
题目链接 洛古 https://www.luogu.org/problemnew/show/P1494 大概说下自己的理解 先来概率的计算公式 ∑C(2,f(i)) / C(2,r−l ...
- hdu4336 Card Collector 容斥原理
In your childhood, do you crazy for collecting the beautiful cards in the snacks? They said that, fo ...
- Java基础二(变量、运算符)
1.变量2.运算符 ###01变量概述 * A: 什么是变量? * a: 变量是一个内存中的小盒子(小容器),容器是什么?生活中也有很多容器,例如水杯是容器,用来装载水:你家里的大衣柜是容器,用来装载 ...
- Unity 原厂免费资源学习