自定义指令-处理图片加载出错

最新推荐文章于 2023-12-23 11:59:37 发布

思ۣۖิิۣۖิ❧❦空❧❦

最新推荐文章于 2023-12-23 11:59:37 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/qq_45228255/article/details/124905330

版权

用户体验图片加载默认图片 Vue指令错误处理

关键词由CSDN通过智能技术生成

处于用户体验的考虑，一般图片都是要处理出错时的展示默认图片

1、普通实现

最简单的方法就是组件引入图片，然后用逻辑中断来控制图片的展示

<template>
  <div>
    <img :src="默认图片 || 后台返回的图片" alt="">
  </div>
</template>

<script>
import 默认图片 from '默认图片路径'

export default {};
</script>

<style lang="scss" scoped>
</style>

2、自定义指令实现

Vue.directive('imgError', {
  inserted(el, obj) {
    el.onerror = function() {
      el.src = obj.value
    }
  }
})

使用

<template>
  <div>
    <img v-imgError="默认图片" :src="后台返回的图片" alt="">
  </div>
</template>

<script>
import 默认图片 from '默认图片路径'

export default {};
</script>

<style lang="scss" scoped>
</style>

这只是简单地封装，可以根据自己的业务来进行复杂封装