面试题：Vue懒加载中如何处理图片加载失败的情况

Question

在Vue项目中使用懒加载图片，当图片由于网络问题或路径错误等原因加载失败时，通常有哪些较好的处理方式？请结合代码示例说明。

Answer 1

在Vue项目中处理图片加载失败通常有以下几种方式：

1. 使用 error 事件

在 img 标签上绑定 error 事件，当图片加载失败时，会触发该事件，在事件处理函数中可以替换为默认图片。

<template>
  <div>
    <img
      :src="imageUrl"
      @error="handleImageError"
      alt="示例图片"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '可能错误的图片路径.jpg',
      defaultImage: 'default.jpg'
    };
  },
  methods: {
    handleImageError(e) {
      e.target.src = this.defaultImage;
    }
  }
};
</script>

2. 使用 computed 属性结合 try - catch

通过计算属性获取图片路径，如果路径解析失败，返回默认图片路径。

<template>
  <div>
    <img
      :src="resolvedImageUrl"
      alt="示例图片"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '可能错误的图片路径.jpg',
      defaultImage: 'default.jpg'
    };
  },
  computed: {
    resolvedImageUrl() {
      try {
        new URL(this.imageUrl);
        return this.imageUrl;
      } catch (error) {
        return this.defaultImage;
      }
    }
  }
};
</script>

3. 使用全局指令

定义一个全局指令，在指令的 inserted 钩子函数中监听图片的 error 事件，处理加载失败情况。

// main.js
import Vue from 'vue';

Vue.directive('image-fallback', {
  inserted(el, binding) {
    el.onerror = function() {
      el.src = binding.value.defaultImage;
    };
  }
});

<template>
  <div>
    <img
      v - image - fallback="{ defaultImage: 'default.jpg' }"
      :src="imageUrl"
      alt="示例图片"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '可能错误的图片路径.jpg'
    };
  }
};
</script>

在处理懒加载图片时，结合 IntersectionObserver 实现懒加载，并在图片加载失败时使用上述方法处理。例如：

<template>
  <div>
    <img
      v - image - fallback="{ defaultImage: 'default.jpg' }"
      :data - src="imageUrl"
      alt="示例图片"
      v - lazy
    />
  </div>
</template>

<script>
import VueLazyload from 'vue - lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'default.jpg',
  loading: 'loading.gif',
  attempt: 1
});

export default {
  data() {
    return {
      imageUrl: '可能错误的图片路径.jpg'
    };
  }
};
</script>

以上方法可以有效地处理Vue项目中图片因网络问题或路径错误导致的加载失败情况。