//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. php操作redis(转)

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis支持的数据类型有 Stirng(字符串), Lis ...

  2. 原根的存在性及个数证明(Primitive Root Theorem)

    我在RSA学习总结的第三部分关于Mille-Rabin素数测试的正确性证明里需要用到此定理,由于证明太长,故另开一章于此.(为啥我说话突然文绉绉了Orz,可能是这周辩论打多了) 结论是对素数p,mod ...

  3. Putty CentOS SSH 总是自动断开连接

    /********************************************************************** * Putty CentOS SSH 总是自动断开连接 ...

  4. gurnt js css 压缩合并

    package.json 文件 { "name":"my-project-name", "version":"0.0.1" ...

  5. 1111B - Average Superhero Gang Power

    刷数学题不知道为啥出来这个 算是贪心吧,先把所有的power加起来,然后sort一遍,每次删掉最小的那个数,记录一个max,平均值ave如果比max大,就替换,一定要小心m的值可能会比n小,意味着不一 ...

  6. Hierarchical RNN

    https://blog.csdn.net/liuchonge/article/details/73610734 https://blog.csdn.net/triplemeng/article/de ...

  7. C++ 的简单输出输入 HDU 1089~1096

    A+B for Input-Output Practice (I) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...

  8. (18)jq事件操作

    jq的私人网站:http://jquery.cuishifeng.cn/ 具体的查看上面的网站 <!DOCTYPE html><html><head> <me ...

  9. time,datetime模块

    time & datetime 模块 在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime,calendar(很少用,不讲),下面 ...

  10. Python-random 随机数模块

    random 随机数模块格式: import random 引入随机模块文件 1 import random 2 3 print(random.random())#(0,1)----float 大于0 ...