//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. OpenVPN多用户配置

    /********************************************************************************* * OpenVPN多用户配置 * ...

  2. Java栈的简单实现

    * 数据结构与算法Java实现 栈 * * @author 小明 * */ public class MyStack { private Node top;// 头指针 int size;// 长度 ...

  3. FTP 文件传输协议的两种模式:主动模式和被动模式

    https://www.cnblogs.com/i-shu/articles/4905266.html FTP支持两种模式,一种方式叫做Standard (也就是 PORT方式,主动方式),一种是 P ...

  4. 20155208实验三 敏捷开发与XP实践

    20155208实验三 敏捷开发与XP实践 一.实验内容 (1)在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己感觉最 ...

  5. Tomcat端口被占用解决办法

    1.在cmd运行窗口中输入netstat -ano 查看当前被占用的端口所对应的进城PID: 2.输入命令tasklist,找到进程号PID对应的进程名称(映像名称) 3.打开任务管理器(ctrl+a ...

  6. vue全家桶+Koa2开发笔记(4)--redis

    redis用来在服务器端存放session 1 安装redis    brew install redis 启动redis   redis-server 2 安装两个中间件  npm i koa-ge ...

  7. 【SpringBoot】单元测试进阶实战、自定义异常处理、t部署war项目到tomcat9和启动原理讲解

    ========================4.Springboot2.0单元测试进阶实战和自定义异常处理 ============================== 1.@SpringBoot ...

  8. gcc的编译属性和选项

    1.指定内存默认对其参数: __attribute__((packed)):按一字节对其__attribute__((aligned(n))):从此之后默认按n字节对其 例如: struct stu ...

  9. mino federation 功能

    mino federation 可以让我们进行 bucket的查找,实现更灵活的分布式控制 其中依赖了几个组件 coredns etcd 参考架构图 说明 官方也提供了一个简单的部署的demo,总的来 ...

  10. lerna import && add 使用&&常见问题解决

    使用lerna 的import 我们可以方便的将一个普通的npm 包倒入到lerna 管理的monorepo 中 环境准备 lerna init 注意必须是一个git 项目,同时需要commit ,不 ...