Vue判断图片是否能正常加载|极客教程

Vue判断图片是否能正常加载

在Vue中，我们经常会遇到需要判断图片是否能正常加载的情况，比如在实际项目中，我们需要展示用户上传的图片或者从后端接口获取的图片，但是有时候这些图片可能不存在或者链接错误，导致页面显示错误或者空白。为了提升用户体验，我们可以在图片加载失败时做一些处理，比如展示默认图片或者提示用户图片加载失败。本文将介绍在Vue中如何判断图片是否能正常加载，并进行相应处理。

方法一：v-on:error监听图片加载失败事件

我们可以使用Vue提供的v-on指令来监听图片加载失败事件，然后在事件处理函数中做相应的处理。具体步骤如下：

在<img>标签上使用v-on指令监听error事件，当图片加载失败时触发事件处理函数；
在事件处理函数中进行判断，如果图片加载失败，则进行相应处理。

下面是一个示例代码：

<template>
  <div>
    <img :src="imageUrl" @error="handleImageError" alt="图片加载失败">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      defaultImageUrl: 'https://example.com/default.jpg'
    };
  },
  methods: {
    handleImageError() {
      this.imageUrl = this.defaultImageUrl;
    }
  }
};
</script>

在上面的示例中，我们通过v-on指令监听error事件，当图片加载失败时调用handleImageError方法，在方法中将imageUrl更新为defaultImageUrl，这样就能展示默认图片了。

方法二：v-bind:src绑定图片地址并通过onerror事件处理加载失败

除了使用v-on指令监听error事件外，我们还可以在<img>标签上绑定src属性，并通过onerror事件处理图片加载失败的情况。具体步骤如下：

在<img>标签上使用v-bind指令绑定src属性，绑定一个变量来保存图片地址；
使用onerror事件处理图片加载失败的情况。

下面是一个示例代码：

<template>
  <div>
    <img :src="imageUrl" @error="handleImageError" alt="图片加载失败">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      defaultImageUrl: 'https://example.com/default.jpg'
    };
  },
  methods: {
    handleImageError(event) {
      event.target.src = this.defaultImageUrl;
    }
  }
};
</script>

在上面的示例中，我们通过v-bind指令绑定src属性，当图片加载失败时，通过onerror事件处理函数将图片地址替换为defaultImageUrl，从而展示默认图片。