//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标签图片加载时 闪烁的更多相关文章

  1. vue开发之图片加载不出来问题解决

    在使用vue开发项目的时候,经常会遇到的一个问题就是:图片加载不出来.下面是我总结的几种图片加载不出来的情况及解决办法. 一.项目打包完成后,打开整体空白 1.路径问题 原因 在vue+webpack ...

  2. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  3. 通过特殊处理 Resize 事件解决 WinForm 加载时闪烁问题的一个方法

    WinForm 上放置的控件多了或者有大背景图,窗体加载时就会闪烁,对于一般的闪烁,设置 DoubleBuffer=True或许有一点改善,要立竿见影的解决可以重载 CreateParams 使用 W ...

  4. <img> 标签 图片加载失败时候处理方案

    应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...

  5. vue中img图片加载中以及加载失败显示默认图片问题

    加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...

  6. vue中的图片加载与显示默认图片

    HTML: <div class="content-show-img"> <div class="show-img"> <img ...

  7. WP 图片加载时显示加载中

    private BitmapImage srcimage = new BitmapImage(); public MainPage() { InitializeComponent(); progres ...

  8. JS图片加载时获取图片宽高信息

    ; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...

  9. Vue优化首屏加载

    背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...

随机推荐

  1. Ubuntu16.04换源(转)

    乌班图换源(ubuntu 16.04换阿里云源为例) 换成国内最快的阿里云源 第一步:备份原来的源文件 cd /etc/apt/ 1 2 然后会显示下面的源文件sources.list 输入命令 su ...

  2. 全局(Global) 与本地(Local)索引的区别

    一.定义说明 oracle数据库中,存在多种对象,最常见的表和索引,索引的目的是为了加快查询:oracle建议一个表>2g时,就建议进行分区,分区表的好处此处省略,分区表有维护操作,但是某些维护 ...

  3. python 网络数据采集1

    python3 网络数据采集1 第一部分: 一.可靠的网络连接: 使用库: python标准库: urllib python第三方库:BeautifulSoup 安装:pip3 install  be ...

  4. js 下载文件的操作方法

    https://blog.csdn.net/zhoumengshun/article/details/71405963

  5. //生成四位数的验证码--->

  6. java-代码块-局部代码块、构造代码块、静态代码块

    1.代码块概述: 在Java中,使用{ }括起来的代码被称为代码块. 2.代码块分类: 根据其位置和声明的不同,可以分为局部代码块,构造代码块.静态代码块和同步代码块(多线程). 3.常见代码块的应用 ...

  7. 费马大定理以及求解a^2+b^2=c^2的奇偶数列法则

    <一>费马大定理:a^n+b^n=c^n 当n大于2时无正整数解. <二>求解a^2+b^=c^2可以使用a值奇偶法则:1.当a=2*n时,b=n^2-1,c=n^2+1   ...

  8. Guava Cache 总结

    想对Guava cache部分进行总结,但思索之后,文档才是最全面.详细的.所以,决定对guava文档进行翻译. 英文地址如下:https://github.com/google/guava/wiki ...

  9. 计算机网络-数据结构-MAC帧头-IP头-TCP头-UDP头

    第0章 数据是如何进行一步步的封装的 第一章:mac帧头定义 帧头数据结构的定义: 一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME ...

  10. torchvision库简介(翻译)

    部分跟新于:4.24日    torchvision 0.2.2.post3 torchvision是独立于pytorch的关于图像操作的一些方便工具库. torchvision的详细介绍在:http ...