vue中 img标签，链接失效显示默认图片 onerror

在 Vue 中，如果使用 img 标签来显示图片，并且图片链接失效时需要显示默认图片，可以使用 onerror 事件来实现。

以下是一个示例代码：

<template>
  <img :src="imageUrl" alt="图片" @error="handleError">
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      imageUrl: 'http://example.com/invalid.jpg',
      defaultImageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7Hy8znZ01pyCwN8l6zDWVwAAAA?pid=ImgDet&rs=1'
    }
  },
  methods: {
    
    
    handleError(event) {
    
    
      event.target.src = this.defaultImageUrl
    }
  }
}
</script>

在上面的代码中，我们首先加载了一个无效的图片链接 http://example.com/invalid.jpg，然后指定了一个默认图片链接 http://example.com/default.jpg。在模板中，我们使用 img 标签来显示图片，并将 src 属性绑定到 imageUrl 变量上。当图片加载失败时，会触发 @error 事件，我们可以在事件处理函数中将 src 属性修改为默认图片链接。

需要注意的是，在一些情况下，比如 src 属性本身就为空或者是一个相对路径，可能无法触发 @error 事件。为了避免这种情况，建议在加载图片前进行判断，保证 src 属性是一个有效的链接。