如何在Vue中处理图片加载失败的情况？

在Vue中处理图片加载失败的情况，通常会在`<img>`标签上使用`v-bind:src`结合计算属性，同时设置一个默认的占位符或者错误图标。当图片加载失败时，计算属性会返回一个备用的路径或者错误提示。这里有一个简单的例子：

<template>
  <div>
    <img :src="computedImageUrl" alt="加载中..." :error="defaultImageUrlOrError">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg', // 原始图片地址
      defaultImageUrl: 'placeholder.jpg', // 默认占位图
      errorImageUrl: 'error.png', // 错误图标

      computedImageUrl: () => {
        const img = new Image();
        img.src = this.imageUrl;
        if (img.complete || img.error) {
          return img.src; // 如果图片已经加载完成或加载失败，则返回实际url
        } else {
          return this.defaultImageUrl; // 图片正在加载中，返回默认路径
        }
      },
    };
  },
};
</script>

在这个例子中，如果图片成功加载，`computedImageUrl`会返回原始图片地址；如果图片加载失败或者加载过程中需要等待，它会返回默认图片地址。