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 ...
随机推荐
- 使用Git来撤销修改
首先进入一个有Git管理的文件夹下: 当我们在文件编写过程中出现了一个错误怎么办呢?如下: 但是此时你并没有将文件提交缓冲区,你可以去手动打卡文件删除这个错误. 当然你也可以查看一下状态: 发现这个文 ...
- Python urllib.quote
转: 编码:urllib.quote(string[, safe]),除了三个符号“_.-”外,将所有符号编码,后面的参数safe是不编码的字符, 使用的时候如果不设置的话,会将斜杠,冒号,等号,问号 ...
- 关于Linux前后台进程切换
前言: 当使用SSH远程登录服务器时,对于运行时间较长的程序(如Caffe的训练可能需要十几个小时), SSH可能会在很长时间后断掉,导致程序没运行完就中断了. 为了解决这个问题,需要将在服务器运行的 ...
- [LeetCode&Python] Problem 171. Excel Sheet Column Number
Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...
- url参数和字典的相互转化
目标url:https://www.baidu.com/s?&wd=python&ie=utf-8 将字典转成url参数 使用urllib.parse的urlencode方法,将字典对 ...
- 监控页面后退前进,浏览器文档加载事件之pageshow、pagehide
https://www.cnblogs.com/milo-wjh/p/6811868.html http://www.runoob.com/jsref/event-onpageshow.html on ...
- js实现一条抛物线
抛物线运动解释: 以右开口为例,根据公式 y^2 = 2px .确定p的值,已知x求y. <!DOCTYPE html> <html> <head> <me ...
- 非系统服务如何随系统启动时自动启动(rc.local加了可执行权限,仍然没有生效)
我们知道,例如我们直接yum 安装的httpd mysqld之类的服务可以直接systemctl enable mysql使服务自动启动,但是,我们应该关心的是但是的那部分 例如nginx,我的话,我 ...
- e的故事.一个常数的传奇 (Eli Maor 著)
第1章 约翰*纳皮尔 (已看) 第2章 认知 (已看) 对数运算 第3章 财务问题 (已看) 第4章 若极限存在,则达之 (已看) 一些与e有关的奇妙的数 第5章 发现微积分的先驱 (已看) 第6章 ...
- Git上传空文件夹的方法
之前发现很多项目文件夹下又.gitkeep文件,不知道它的用处. 直到前段时间遇到一个问题,Git如何上传空文件夹? 默认情况下,Git不会上传本地空文件夹,如果有些特殊场合需要的话,一个简单的方法是 ...