vue自定义指令+onerror 解决图片显示报错问题

最新推荐文章于 2025-01-14 11:36:51 发布

Gik99

最新推荐文章于 2025-01-14 11:36:51 发布

阅读量730

点赞数

分类专栏：前端常见问题解疑文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Gik99/article/details/129673103

版权

前端常见问题解疑专栏收录该内容

30 篇文章

订阅专栏

文章介绍了如何在Vue项目中处理后台返回无效图片地址的问题，通过创建自定义指令结合img标签的onerror属性，当图片加载失败时，自动替换为默认图片。首先，定义了一个名为imagerror的自定义指令，在插入DOM后设置onerror事件处理函数，将默认图片路径赋值给图片的src。然后，在main.js中全局注册这个自定义指令。最后，在页面中使用v-imagerror指令和对应的数据属性来调用此功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

有时后台返回的图片地址不是一个有效的图片,此时就需要默认返回一个图片来显示

解决方案：

自定义指令 + img下的onerror 属性

自定义指令

onerror 是img加载失败显示一个碎片图片时触发

1.创建一个单独的自定义指令页面,然后导出去

export const imagerror = {
  // 指令对象 会在当前的dom元素插入到节点之后执行
  inserted(dom, options) {
    // options是 指令中的变量的解释  其中有一个属性叫做 value
    // dom 表示当前指令作用的dom对象
    // dom认为此时就是图片
    // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
    dom.onerror = function() {
      // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
      // dom可以注册error事件
      dom.src = options.value // 这里不能写死
    }
  }
}

2.在main.js 利用import *as 属性名from ‘指令文件地址’ 完成全局注册

import * as directives from '@/directives'
// {imagerror: {}, abc1: {}, ...}
// 注册自定义指令
// 遍历所有的导出的指令对象 完成自定义全局注册
// ['iamgerror', 'abc1', ...]
Object.keys(directives).forEach(key => {
  // 注册自定义指令
  Vue.directive(key, directives[key])
 
  // Vue.derective('iamgerror', {})
  // Vue.derective('abc1', {})
  // Vue.derective('abc2', {})
})

3.页面调用

<img v-imagerror="defaultImg" :src="staffPhoto" class="user-avatar">

 data() {
    return {
      defaultImg: require('@/assets/common/head.jpg')
    }
  },