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 ...
随机推荐
- Android.mk使用第三方库方法
/********************************************************************** * Android.mk使用第三方库方法 * 说明: * ...
- hdu-2196 树形dp 求一个树中所有节点能到达的最远距离f[i] (其实也不难嘛!)
#include <bits/stdc++.h> using namespace std; ; struct T { int to; int w; }; vector < vecto ...
- .net core consul grpc--系统服务RPC实现通信(一)
.net core grpc 系统服务实现通信(一) 现在系统都服务化,.net core 实现服务化的方式有很多,我们通过grpc实现客户端.服务端通信. grpc(https://grpc.io/ ...
- UE4开发安卓遇到的坑
做个记录,方便以后自己查询. 1. 打包后,应用出现缺乏google key的问题. 理论上,这个网站可以解决:https://wiki.unrealengine.com/How_To_Sign_U ...
- 【HAOI2014】走出金字塔
神奇…… 原题: 在探险的过程中,考古学家Dr. Kong 无意地被困在一个金字塔中.金字塔中的每个房间都是三角形.Dr. Kong可以破壁走到相邻的房间去. 例如,如果他目前处于三角形(2,2)房间 ...
- root用户登录mysql后新建用户提示1045错误
执行以下命令查看root权限 show grants for 'root'@'localhost'; 如果没有显示with grant option,说明是root没有拥有新建授权用户的权限(为什么会 ...
- 03C++语言对C的增强——实用性、变量检测、struct类型、C++中所有变量和函数都必须有类型、bool类型、三目运算符
1.“实用性”增强 C语言中的变量都必须在作用域开始的位置定义,C++中更强调语言的“实用性”,所有的变量都可以在需要使用时再定义. 2.C++对c语言register的增强 register关键字 ...
- NET使用NPOI组件导出Excel-入门示例及通用方法
一.Excel导入及导出问题产生: 从接触.net到现在一直在维护一个DataTable导出到Excel的类,时不时还会维护一个导入类.以下是时不时就会出现的问题: 导出问题: 如果是as ...
- Grid Virtual Server 和 网格计算
Grid Virtual Server 的 Virtual Server 源于 LVS (Linux Virtual Server) , LVS 的意思就是把 多个 Linux 服务器 联合起来构成一 ...
- ThinkPHP5与JQuery实现图片上传和预览效果
内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...