//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. Android.mk使用第三方库方法

    /********************************************************************** * Android.mk使用第三方库方法 * 说明: * ...

  2. hdu-2196 树形dp 求一个树中所有节点能到达的最远距离f[i] (其实也不难嘛!)

    #include <bits/stdc++.h> using namespace std; ; struct T { int to; int w; }; vector < vecto ...

  3. .net core consul grpc--系统服务RPC实现通信(一)

    .net core grpc 系统服务实现通信(一) 现在系统都服务化,.net core 实现服务化的方式有很多,我们通过grpc实现客户端.服务端通信. grpc(https://grpc.io/ ...

  4. UE4开发安卓遇到的坑

    做个记录,方便以后自己查询. 1.  打包后,应用出现缺乏google key的问题. 理论上,这个网站可以解决:https://wiki.unrealengine.com/How_To_Sign_U ...

  5. 【HAOI2014】走出金字塔

    神奇…… 原题: 在探险的过程中,考古学家Dr. Kong 无意地被困在一个金字塔中.金字塔中的每个房间都是三角形.Dr. Kong可以破壁走到相邻的房间去. 例如,如果他目前处于三角形(2,2)房间 ...

  6. root用户登录mysql后新建用户提示1045错误

    执行以下命令查看root权限 show grants for 'root'@'localhost'; 如果没有显示with grant option,说明是root没有拥有新建授权用户的权限(为什么会 ...

  7. 03C++语言对C的增强——实用性、变量检测、struct类型、C++中所有变量和函数都必须有类型、bool类型、三目运算符

    1.“实用性”增强 C语言中的变量都必须在作用域开始的位置定义,C++中更强调语言的“实用性”,所有的变量都可以在需要使用时再定义. 2.C++对c语言register的增强 register关键字 ...

  8. NET使用NPOI组件导出Excel-入门示例及通用方法

    一.Excel导入及导出问题产生:   从接触.net到现在一直在维护一个DataTable导出到Excel的类,时不时还会维护一个导入类.以下是时不时就会出现的问题:   导出问题:   如果是as ...

  9. Grid Virtual Server 和 网格计算

    Grid Virtual Server 的 Virtual Server 源于 LVS (Linux Virtual Server) , LVS 的意思就是把 多个 Linux 服务器 联合起来构成一 ...

  10. ThinkPHP5与JQuery实现图片上传和预览效果

    内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...