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

Question

在Vue项目中使用懒加载处理图片时，如果图片资源加载失败，你会采取哪些方法进行处理？请结合代码示例说明。

Answer 1

在Vue项目中处理图片懒加载失败，常见方法有：

1. 使用error事件：

   <template>
     <div>
       <img
         v-lazy="imageUrl"
         @error="handleImageError"
         alt="示例图片"
       />
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         imageUrl: '可能错误的图片链接'
       };
     },
     methods: {
       handleImageError(e) {
         e.target.src = '备用图片链接';
       }
     }
   };
   </script>
   

2. 结合v-if控制显示：

   <template>
     <div>
       <img
         v-if="imageLoaded"
         v-lazy="imageUrl"
         alt="示例图片"
       />
       <img v-else src="备用图片链接" alt="备用图片" />
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         imageUrl: '可能错误的图片链接',
         imageLoaded: true
       };
     },
     mounted() {
       const img = new Image();
       img.src = this.imageUrl;
       img.onload = () => {
         this.imageLoaded = true;
       };
       img.onerror = () => {
         this.imageLoaded = false;
       };
     }
   };
   </script>
   

3. 使用全局错误处理：在main.js中设置全局的图片加载错误处理。

   import Vue from 'vue';
   import App from './App.vue';
   
   Vue.config.errorHandler = (err, vm, info) => {
     if (info.includes('Error in v-lazy directive')) {
       // 处理图片懒加载错误
       console.error('图片懒加载错误:', err);
       // 这里可进行统一的备用图片设置等操作
     }
   };
   
   new Vue({
     render: h => h(App)
   }).$mount('#app');