1. //js
    data(){
  2. return{
  3. img_url: '',
  4. }
  5. },
    created(){
      //请求数据,并给图片赋值url
      ajax.get(http_url)
      .then(res=>{
        this.img_url = res.data.img_url;
      })
      .catch(error=>{
  1.   })  
    }

  <-- html -->

  1. <div>
      <img :src="img_url">
    </div>

绑定的 :src=“img_url” 初次加载闪烁 然后在父元素添加了v-cloak

加载时 在图片正常显示之前还是会显示加载出错的默认图片

因为此时的img_url为空 所以就在父元素 加上 v-if=“img_url” 完美解决

  1. <div v-if="img_url">
  2. <img :src="img_url">
  3. </div>

  1. <div v-if="img_url">
  2. <img :src="img_url"onerror=“defaultImg>
  3. </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. 使用Git来撤销修改

    首先进入一个有Git管理的文件夹下: 当我们在文件编写过程中出现了一个错误怎么办呢?如下: 但是此时你并没有将文件提交缓冲区,你可以去手动打卡文件删除这个错误. 当然你也可以查看一下状态: 发现这个文 ...

  2. Python urllib.quote

    转: 编码:urllib.quote(string[, safe]),除了三个符号“_.-”外,将所有符号编码,后面的参数safe是不编码的字符, 使用的时候如果不设置的话,会将斜杠,冒号,等号,问号 ...

  3. 关于Linux前后台进程切换

    前言: 当使用SSH远程登录服务器时,对于运行时间较长的程序(如Caffe的训练可能需要十几个小时), SSH可能会在很长时间后断掉,导致程序没运行完就中断了. 为了解决这个问题,需要将在服务器运行的 ...

  4. [LeetCode&Python] Problem 171. Excel Sheet Column Number

    Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...

  5. url参数和字典的相互转化

    目标url:https://www.baidu.com/s?&wd=python&ie=utf-8 将字典转成url参数 使用urllib.parse的urlencode方法,将字典对 ...

  6. 监控页面后退前进,浏览器文档加载事件之pageshow、pagehide

    https://www.cnblogs.com/milo-wjh/p/6811868.html http://www.runoob.com/jsref/event-onpageshow.html on ...

  7. js实现一条抛物线

    抛物线运动解释: 以右开口为例,根据公式  y^2 = 2px .确定p的值,已知x求y. <!DOCTYPE html> <html> <head> <me ...

  8. 非系统服务如何随系统启动时自动启动(rc.local加了可执行权限,仍然没有生效)

    我们知道,例如我们直接yum 安装的httpd mysqld之类的服务可以直接systemctl enable mysql使服务自动启动,但是,我们应该关心的是但是的那部分 例如nginx,我的话,我 ...

  9. e的故事.一个常数的传奇 (Eli Maor 著)

    第1章 约翰*纳皮尔 (已看) 第2章 认知 (已看) 对数运算 第3章 财务问题 (已看) 第4章 若极限存在,则达之 (已看) 一些与e有关的奇妙的数 第5章 发现微积分的先驱 (已看) 第6章 ...

  10. Git上传空文件夹的方法

    之前发现很多项目文件夹下又.gitkeep文件,不知道它的用处. 直到前段时间遇到一个问题,Git如何上传空文件夹? 默认情况下,Git不会上传本地空文件夹,如果有些特殊场合需要的话,一个简单的方法是 ...