<div class="caseImageList" style="background-color: #fff"> <h3>实名认证图片</h3> <img v-if="faceDetail.faceURL" :src="faceDetail.faceURL" alt="" /> <div v-else class="noImg">暂无图片</div> </div>在图片加载的过程中加loading怎么写

你可以在 `img` 标签中添加 `onload` 和 `onerror` 事件，来监听图片的加载状态，并在加载过程中显示加载动画。例如：

<div class="caseImageList" style="background-color: #fff">
  <h3>实名认证图片</h3>
  <div v-if="isLoading">
    <!-- 这里是加载动画，可以根据自己的需求自定义 -->
    <p>Loading...</p>
  </div>
  <img v-else-if="faceDetail.faceURL"
       :src="faceDetail.faceURL"
       alt=""
       @load="handleImageLoad"
       @error="handleImageError" />
  <div v-else class="noImg">暂无图片</div>
</div>

在 `data` 中定义一个 `isLoading` 状态来控制加载动画的显示和隐藏：

data() {
  return {
    isLoading: true,
    faceDetail: {}
  }
}

然后在 `methods` 中编写 `handleImageLoad` 和 `handleImageError` 方法来处理图片的加载状态：

methods: {
  handleImageLoad() {
    // 图片加载成功，隐藏加载动画
    this.isLoading = false;
  },
  handleImageError() {
    // 图片加载失败，隐藏图片并显示提示信息
    this.faceDetail.faceURL = '';
    this.$message.error('图片加载失败，请稍后再试！');
  }
}