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 ...
随机推荐
- DS18B20读数错误排除
描述: 同时测试了好几个板子,都接了DS18B20传感器.但,有的板子读取的DS18B20温度值正确,有的读取错误. 原因查找: 以为是有的传感器坏了,但测试后发现并不是. 又以为是DS18B20需要 ...
- 特征选择之Chi卡方检验
特征选择之Chi卡方检验 卡方值越大,说明对原假设的偏离越大,选择的过程也变成了为每个词计算它与类别Ci的卡方值,从大到小排个序(此时开方值越大越相关),取前k个就可以. 针对英文纯文本的实验结果表明 ...
- 20155219 2016-2017-2 《Java程序设计》第8周学习总结
20155219 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 通用API 日志API 1.java.util.logging包提供了日志功能相关类与接口, ...
- SQLI DUMB SERIES-4
less4 输入单引号发现回显正常,说明单引号被过滤了,输入双引号: ?id=1" 说明输入的Id被一对双引号和圆括号包围,因此闭合双引号和圆括号就行,其他方法跟less1差不多 例如:un ...
- 基础练习 2n皇后问题
时间限制:1.0s 内存限制:512.0MB 提交此题 锦囊1 锦囊2 问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后,使任意的两个黑皇后都不在同 ...
- .net core 微服务架构-docker的部署-包括网关服务(Ocelot)+认证服务(IdentityServer4)+应用服务(asp.net core web api)
本文主要介绍通过Docker来部署通过.Net Core开发的微服务架构,部署的微服务主要包括统一网关(使用Ocelot开发).统一认证(IdentityServer4).应用服务(asp.net c ...
- LeetCode - Baseball Game
You're now a baseball game point recorder. Given a list of strings, each string can be one of the 4 ...
- ClusterControl 强大免费数据管理工具
几张参考图 galera 集群管理 多种数据库管理 组件架构 参考资料 https://severalnines.com/docs/intro.html
- skipper 内置的常用filters
skipper 的filter 功能很强大,可做好多方便的扩展 格式: all: * -> filter1 -> filter2 -> "http://127.0.0.1: ...
- YII2常用知识点总结
YII2常用知识点总结 (一)总结性语句 (1)经常看看yii源码比如vendor\yiisoft\yii2\web这个目录(很重要)下的文件中的方法(这些文件中的公共方法,大致看了下基本上都可以通过 ...