怎么在el-image中插入vue-piczoom

要在 `el-image` 中使用 `vue-piczoom`，可以按照以下步骤操作：

1. 安装 `vue-piczoom`：可以使用命令 `npm install vue-piczoom --save` 或 `yarn add vue-piczoom` 进行安装。

2. 在需要使用的组件中引入 `vue-piczoom` 和 `el-image`：

<template>
  <div class="image-container">
    <el-image
      :src="imageUrl"
      :preview-src-list="[imageUrl]"
      fit="contain"
      @click.native="showImageZoom"
    />
  </div>
</template>

<script>
import VuePicZoom from 'vue-piczoom';
import { ElImage } from 'element-ui';

export default {
  components: {
    VuePicZoom,
    ElImage,
  },
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
    };
  },
  methods: {
    showImageZoom() {
      this.$refs.picZoom.show();
    },
  },
};
</script>

3. 在 `el-image` 组件上添加一个点击事件监听器，当用户点击图片时，调用 `showImageZoom` 方法来显示 `vue-piczoom` 组件。

4. 在 `div` 标签中添加 `vue-piczoom` 组件：

<template>
  <div>
    <vue-piczoom ref="picZoom" :img-src="imageUrl" />
  </div>
</template>

5. 在 `vue-piczoom` 组件上设置 `ref` 属性，以便在 `el-image` 组件中可以访问该组件的方法。

这样就可以在 `el-image` 中使用 `vue-piczoom` 组件来实现图片缩放功能了。