脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue图片加载与显示图片

vue图片加载与显示默认图片实例代码

 更新时间：2017年03月16日 11:10:18   作者：Redchar  
这篇文章主要为大家详细介绍了vue图片加载与显示默认图片的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue图片加载与显示默认图片的具体代码，供大家参考，具体内容如下

HTML：

<div class="content-show-img">
　　<div class="show-img">
　　　　<img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg">
　　</div>
</div>

JS：

Vue.prototype.successLoadImg = function(event) {
  if (event.target.complete == true) {
    event.target.classList.remove("default-image");;
    var imgParentNode = event.target.parentNode;
    if(imgParentNode.classList.contains('show-img')==true){
      imgParentNode.style.background = "#000";
    }
  }
};
Vue.prototype.errorLoadImg = function(event) {
  event.target.classList.add("default-image");;
};

针对尺寸不统一的：先显示默认图片，加载成功时移除默认图片，填充背景。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue-resource 拦截器interceptors使用详解

    vue-resource 拦截器interceptors使用详解

    这篇文章主要介绍了vue-resource 拦截器interceptors使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 深入了解Vue中单向数据流的原理与管理

    深入了解Vue中单向数据流的原理与管理

    在Vue中，数据流是指数据的传递和管理方式，而Vue采用的是单向数据流，所以这篇文章就来就来和大家讲讲什么是Vue的数据流以及如何进行数据流管理，感兴趣的可以了解一下
    2023-06-06
  • vue Tab切换以及缓存页面处理的几种方式

    vue Tab切换以及缓存页面处理的几种方式

    相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。
    2021-05-05
  • 前端实现Vue组件页面跳转的多种方式小结

    前端实现Vue组件页面跳转的多种方式小结

    这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下
    2024-02-02
  • 一篇超详细的Vue-Router手把手教程

    一篇超详细的Vue-Router手把手教程

    这篇文章主要给大家介绍了关于Vue-Router的相关资料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • Vue3中操作dom的四种方式总结(建议收藏!)

    Vue3中操作dom的四种方式总结(建议收藏!)

    VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 一次搞清Vue3中组件通讯的全部方式

    一次搞清Vue3中组件通讯的全部方式

    毫无疑问,组件通讯是Vue中非常重要的技术之一,它的出现能够使我们非常方便的在不同组件之间进行数据的传递,以达到数据交互的效果,所以,学习组件通讯技术是非常有必要的,本文将一次解决Vue3中组件通讯的全部方式,总有你想要的那一种,需要的朋友可以参考下
    2024-09-09
  • vue实现购物车选择功能

    vue实现购物车选择功能

    这篇文章主要为大家详细介绍了vue实现购物车选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • vue.js的提示组件

    vue.js的提示组件

    这篇文章主要为大家详细介绍了vue.js实现一个漂亮、灵活、可复用的提示组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue脚手架vue-cli的卸载与安装方式

    vue脚手架vue-cli的卸载与安装方式

    pm是nodejs的包管理和分发工具,它可以让javascript开发者能够更加轻松的共享代码和共用代码片段,下面这篇文章主要给大家介绍了关于vue脚手架vue-cli卸载与安装的相关资料,需要的朋友可以参考下
    2022-07-07

最新评论