vue2 如何处理图片加载失败

Question

vue2.0 图片加载失败，想用默认图片代替，怎么处理？

Answer 1

@error错误事件

可以在util文件件下配置个config文件，放置公共的资源

Answer 2

写一个大概的：

// FallbackImage.vue

<template>
  <div>
    <img :src="imageSrc" ref="img">
  <div>
</template>

<script>
export default {
  name: 'fallback-image',
  props: ['src', 'srcFallback'],
  data () {
    return {
      imageSrc: this.src
   }
  },
  mounted () {
    this.$refs.img.onerror = () => {
      this.imageSrc = this.srcFallback
    }
  }
}
</script>

Answer 3

注册onerror事件？

Answer 4

onerror 不行 用@error 亲测有效

Answer 5

这个vue2.0图片懒加载支持图片加载失败，https://github.com/shuizhuboc...