vue图片加载失败时用默认图片替换的方法

 更新时间:2019年08月29日 11:08:35   作者:Asunyu  
这篇文章主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

方法如下

原理就是给img绑定error事件,替换原有的src地址。

首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址;

在html页面的img标签上绑定该属性

这样默认图片就设置好了;

这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高;

像后台管理系统中,如果是这样或者是有一个默认封面的话,会感觉很舒服;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

  • Vue2 Element el-table多选表格控制选取的思路解读

    Vue2 Element el-table多选表格控制选取的思路解读

    这篇文章主要介绍了Vue2 Element el-table多选表格控制选取的思路解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue3 elementUI 中 date-picker 使用过程遇到坑

    Vue3 elementUI 中 date-picker 使用过程遇到坑

    这篇文章主要介绍了Vue3 elementUI 中 date-picker 使用过程遇到坑,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • Vue3之Mixin的使用方式(全局,局部,setup内部使用)

    Vue3之Mixin的使用方式(全局,局部,setup内部使用)

    这篇文章主要介绍了Vue3之Mixin的使用方式(全局,局部,setup内部使用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中get和post请求的区别点总结

    vue中get和post请求的区别点总结

    在本篇文章里小编给大家分享的是一篇关于vue中get和post请求的区别点总结内容,对此有兴趣的朋友们可以跟着学习下。
    2021-12-12
  • Vue使用v-model收集各种表单数据、过滤器的示例详解

    Vue使用v-model收集各种表单数据、过滤器的示例详解

    这篇文章主要介绍了Vue使用v-model收集各种表单数据、过滤器的示例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • ToB项目如何沉淀业务公共组件示例详解

    ToB项目如何沉淀业务公共组件示例详解

    这篇文章主要为大家介绍了ToB项目如何沉淀业务公共组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 分享一个基于Ace的Markdown编辑器

    分享一个基于Ace的Markdown编辑器

    相信开发中或多或少都会有使用md的时候。那么一个简易的md编辑器显得尤为重要,如果想要在自己的项目中添加一个md编辑器,那么不妨来看看这篇文章
    2021-10-10
  • Vue-router如何实现路由懒加载

    Vue-router如何实现路由懒加载

    在现代前端开发中,Vue.js凭借其轻量级和易用性,成为了很多开发者的首选框架,本文将结合实际案例,详细讲解Vue-Router路由懒加载的用法,需要的可以参考下
    2024-11-11
  • Vue实现读取本地图片的示例代码

    Vue实现读取本地图片的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue实现读取本地图片的功能,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以学习一下
    2023-07-07
  • vue3 pinia使用及持久化注册

    vue3 pinia使用及持久化注册

    本文介绍了Pinia的使用方法及如何实现状态持久化存储,首先,介绍了Pinia的安装和在main.ts中的挂载,介绍了getters和actions的使用方法,最后,详细说明了如何通过Pinia-plugin-persistedstate插件实现Pinia状态的持久化处理,包括插件的安装、配置和在main.ts文件中的注册
    2024-10-10

最新评论