Vue全局为`img`标签设置默认图片的优雅解决方案

Vue全局为img标签设置默认图片的优雅解决方案

引言

在Vue项目开发过程中，我们经常会遇到图片加载失败的情况，这时候如果没有一个默认的占位图，用户体验会大打折扣。通常情况下，我们会在每个img标签上添加onerror事件来处理这种情况。但是，如果项目已经进行了一大半，页面中有大量的img标签，一个个去添加onerror事件无疑是一项繁琐且容易出错的工作。本文将介绍一种全局设置img标签默认图片的方法，无论是Vue 2还是Vue 3，都能轻松实现。

传统方法的局限性

通常情况下，我们会这样为单个img标签设置默认图片：

<img src="xxx.png" onerror="this.src='error.png'" />

或者在Vue模板中这样写：

<img :src="imageSrc" @error="imageSrc = 'error.png'" />

但是，如果项目中img标签众多，这种方法就需要重复大量的代码，且难以维护。

全局解决方案

为了解决这个问题，我们可以在Vue应用的全局范围内设置一个默认图片。以下是具体的实现步骤：

1. 引入Vue和App组件

   import { createApp } from 'vue';
   import App from './App.vue';
   

2. 创建Vue应用实例

   const app = createApp(App);
   

3. 全局混入（Mixin）
   在全局混入中，我们使用mounted生命周期钩子来为所有img标签添加error事件监听器。

   app.mixin({
     mounted() {
       this.$nextTick(() => {
         const images = document.getElementsByTagName('img');
         images.forEach(img => {
           img.addEventListener('error', this.handleImageError);
         });
       });
     },
     methods: {
       handleImageError(event) {
         event.target.src = require('@/assets/error.png'); // 设置默认图片路径
       },
     },
   });
   

4. 挂载Vue应用

   app.mount('#app');
   

代码解释

• $nextTick()：确保DOM更新完成后再执行图片错误处理的代码。
• getElementsByTagName(‘img’)：获取页面上所有的img元素。
• addEventListener(‘error’, this.handleImageError)：为每个img元素添加error事件监听器。
• handleImageError(event)：当图片加载失败时，将img元素的src属性设置为默认图片的路径。

总结

通过上述方法，我们可以在Vue项目的全局范围内为所有img标签设置默认图片，而无需在每个img标签上重复添加onerror事件。这种方法不仅减少了代码的冗余，还提高了代码的可维护性。无论是在Vue 2还是Vue 3项目中，这种方法都是适用的。