【区分vue2和vue3下的element UI Image 图片组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，Element UI 并没有一个专门命名为 el-image 的图片组件作为标准组件库的一部分。然而，Element UI 官方文档中提到了如何使用 Vue 指令（如 v-bind:src）和 Vue 的基础功能来展示图片，这意味着你通常会使用原生的 <img> 标签结合 Vue 的特性来管理图片。

不过，在 Element Plus（Element UI 的 Vue 3 版本）中，确实有一个名为 ElImage 的图片组件，它提供了更多的功能和灵活性。

Vue 3 + Element Plus 的 ElImage

属性（Props）

• src: 图片的源地址。
• fit: 图片的填充模式，可选值为 fill、contain、cover、none、scale-down，默认为 cover。
• alt: 替代文本。
• lazy: 是否开启懒加载，默认为 false。
• lazy-load: 懒加载图片的占位符，可以是图片地址或函数。
• error: 图片加载失败时的占位图。
• preview-src-list: 开启图片预览功能时，需要传入一个图片地址列表。
• z-index: 预览图片的 z-index。
• preview-popper-class: 预览浮层的额外类名。
• preview-visible: 控制预览的显示与隐藏，需要配合 .sync 修饰符使用。

事件（Events）

• preview: 点击图片触发预览时的事件。
• error: 图片加载失败时触发的事件。
• load: 图片加载成功时触发的事件。

方法（不直接暴露，但可通过其他方式控制）

ElImage 组件通常不直接暴露方法供外部调用。但是，你可以通过修改其绑定的数据（如 src、preview-visible 等）来控制组件的行为。

示例

<template>
  <el-image
    src="https://example.com/image.jpg"
    fit="fill"
    :alt="altText"
    @load="handleImageLoad"
    @error="handleImageError"
    preview-src-list="imageList"
  ></el-image>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const altText = ref('示例图片');
    const imageList = ref(['https://example.com/image.jpg']);

    const handleImageLoad = () => {
      console.log('图片加载成功');
    };

    const handleImageError = () => {
      console.log('图片加载失败');
    };

    return {
      altText,
      imageList,
      handleImageLoad,
      handleImageError,
    };
  },
};
</script>

Vue 2 + Element UI

在 Vue 2 中，由于 Element UI 没有 el-image 组件，你通常会这样使用 <img> 标签：

<template>
  <img
    :src="imageUrl"
    :alt="altText"
    @load="handleImageLoad"
    @error="handleImageError"
  />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      altText: '示例图片',
    };
  },
  methods: {
    handleImageLoad() {
      console.log('图片加载成功');
    },
    handleImageError() {
      console.log('图片加载失败');
    },
  },
};
</script>

在这个例子中，我们使用了 Vue 的 :src 和 :alt 绑定来动态设置图片的源地址和替代文本，并使用 @load 和 @error 事件监听器来处理图片加载成功和失败的情况。这种方式虽然不使用 Element UI 的组件，但它是 Vue 2 中处理图片的标准方式。