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 ...
随机推荐
- 当BeanUtils遇到泛型
前言: BeanUtils(spring版/apache版)工具极大方便了java developer, 尤其在写业务代码中, 各种域模型DO, BO, VO等对象之间的复制. 但使用BeanUtil ...
- 卷积神经网络 CNN 笔记
链接: 在训练卷积神经网络(CNN)的某一个卷积层时,实际上是在训练一系列的滤波器(filter).简单来说,训练CNN在相当意义上是在训练每一个卷积层的滤波器.让这些滤波器组对特定的模式有高的激活, ...
- 什么是 JVM
什么是 JVM 先来看下百度百科的解释: JVM 是 Java Virtual Machine(Java 虚拟机)的缩写,JVM 是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算 ...
- Django模型层之多表操作
----------------https://www.cnblogs.com/liuqingzheng/articles/9499252.html 实例:我们来假定下面这些概念,字段和关系 一 创建 ...
- python列表复习
列表的切片 >>> name = list()>>> name.extend(range(100))>>> name[0, 1, 2, 3, 4, ...
- 【数据库】jdbc详解
try { if(resultSet!=null){ resultSet.close(); } }catch (SQLException e){ e.printStackTrace(); }final ...
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- gravitee-gateway 又一个开源 apigateway
gravitee-gateway 是Gravitee.io基于 java 开发的api gateway 功能很丰富,包含ui 界面 报警管理,访问控制管理,同时也包含一个比较完整的api 声明周期管理 ...
- Visual Studio项目的生成事件代码
我们打开vs的项目属性可以看到有生成事件,如下图: 可以看到有两块空白区域,这个空白区域可以让我们写代码或脚本来处理编译生成前后的时候,处理一些事情,今天就简单的来说说这两块. 生成前事件命令行 我想 ...
- Python 给实例或者类动态绑定属性和方法
首页定义一个class,创建一个实例之后,我们可以给该实例绑定任何属性和方法,先定义class: class Student: def __init__(self, name, score): sel ...