el-img标签图片加载时与加载失败的处理方法

el-img 是 element-plus 中的图片组件，它提供了图片加载时和加载失败的处理方法。具体的处理方法如下：

1. 图片加载时的处理方法：

可以使用 el-img 组件的 `preview-src-list` 属性预加载图片，当图片加载成功后，会自动替换预加载的图片。

<el-img
  :src="imageSrc"
  :preview-src-list="[imageSrc]"
  @load="handleImageLoad"
></el-img>

在 `handleImageLoad` 方法中，可以添加图片加载成功后的处理逻辑。

methods: {
  handleImageLoad() {
    console.log('图片加载成功');
  }
}

2. 图片加载失败的处理方法：

可以使用 el-img 组件的 `error` 事件来处理图片加载失败的情况。

<el-img
  :src="imageSrc"
  @error="handleImageError"
></el-img>

在 `handleImageError` 方法中，可以添加图片加载失败后的处理逻辑。

methods: {
  handleImageError() {
    console.log('图片加载失败');
  }
}

通过使用 el-img 组件提供的预加载和错误事件处理方法，可以更好地处理图片加载时的情况，提高用户体验。

相关问题

el-upload 回显时加载异步图片

在 `el-upload` 中，可以使用 `on-success` 事件来获取上传成功后的图片地址，并将其赋值给 `imageUrl` 变量，以便在页面上显示上传的图片。示例如下：

<el-upload
  class="avatar-uploader"
  action="/upload"
  :show-file-list="false"
  :on-success="handleSuccess"
>
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    }
  }
}

在上述示例中，当上传成功后，会将上传成功后的图片文件赋值给 `imageUrl` 变量，并通过 `URL.createObjectURL` 方法生成一个临时的图片链接，以便在页面上展示。

需要注意的是，`URL.createObjectURL` 方法生成的链接是临时的，浏览器会在页面卸载时自动释放这些链接，避免内存泄漏问题。如果需要永久保存上传的图片，需要将图片存储到服务器中，并在页面中展示服务器存储的图片链接。

el-image为什么加载失败

el-image在加载图片时可能会出现加载失败的情况，可能的原因如下：

1. 图片地址错误：请检查图片地址是否正确，是否拼写错误、缺少斜杠或者协议等。

2. 图片不存在：请检查图片是否存在，是否已经被删除或者移动了位置。

3. 网络问题：请检查网络连接是否正常，是否被防火墙或者代理屏蔽了。

4. 跨域问题：如果图片地址跨域了，可能会被浏览器的同源策略拦截，导致无法加载。可以尝试使用代理或者CORS解决。

5. 服务器错误：如果图片地址是正确的，但是仍然无法加载，可能是服务器出现了错误或者异常，请联系服务器管理员解决。

如果以上方法都不能解决问题，建议尝试使用其他方式来加载图片，比如使用img标签或者其他图片加载库。同时，也可以在控制台查看加载失败的具体错误信息，以便更好地定位和解决问题。