Vue项目实战：解决图片加载失败与显示异常的技巧详解

一、Vue中使用相对路径图片不显示问题

解决方法：

1. 确保图片路径正确：首先，确保图片确实存在于指定的路径中。
2. 使用require引入图片：利用require语法来引入图片，例如：

   
   <img :src="require('@/assets/banner2.jpg')" />
   

   这样做可以确保webpack正确处理图片路径。

二、图片加载失败显示默认图片

方法一：使用onerror属性

<img :src="img" :onerror="defaultImg" />
<script>
export default {
  data() {
    return {
      img: '', // 图片的URL
      defaultImg: 'require('@/assets/images/default-person.png')'
    };
  }
}
</script>

方法二：使用@error事件

<img :src="img" @error="handleError" />
<script>
export default {
  data() {
    return {
      img: '', // 图片的URL
      defaultImg: require('@/assets/images/default-person.png')
    };
  },
  methods: {
    handleError(e) {
      e.target.src = this.defaultImg;
    }
  }
}
</script>

三、Vue项目中图片懒加载的实现

使用vue-lazyload插件

安装插件：

npm install vue-lazyload -D

配置插件： “`javascript import Vue from ‘vue’; import VueLazyload from ‘vue-lazyload’;

Vue.use(VueLazyload, {

 preLoad: 1.3,
 error: require('@/assets/images/default-person.png'),
 loading: require('@/assets/images/loading.gif'),
 attempt: 1

});

3. **使用懒加载**：
   ```html
   <img v-lazy="item.image" />

四、动态图片路径的处理

解决方法：

使用require来处理动态路径：

export default {
  data() {
    return {
      imgArr: [
        { src: require('path/to/image1.jpg') },
        { src: require('path/to/image2.jpg') }
      ]
    };
  }
}

五、图片加载中的处理

实现方法：

1. data() {
    return {
      loadingImg: require('@/assets/images/loading.gif')
    };
   }
   

在img标签中使用：

<img :src="loadingImg" v-if="!imgLoaded" />
<img :src="img" v-else />

2. mounted() {
    const img = new Image();
    img.onload = () => {
      this.imgLoaded = true;
    };
    img.src = this.img;
   }
   

六、总结

在实际开发中，遇到问题时，不妨多尝试几种方法，找到最适合项目需求的解决方案。毕竟，细节决定成败，每一个小问题的解决，都是向完美用户体验迈进的一步。