html文件使用el-image-viewer

在HTML文件中使用`<el-image-viewer>`组件，首先需要确保你已经在项目中引入了Element UI库。以下是基本步骤：

1. 引入依赖：在你的HTML头部添加Element UI的链接或者CDN引用：

   <!-- 使用本地资源 -->
   <link rel="stylesheet" href="path/to/element-ui/lib/theme-chalk/index.css">
   <script src="path/to/element-ui/lib/index.js"></script>

   <!-- 或者使用CDN -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>

2. 在模板中引入并使用组件：

   <template>
     <div id="app">
       <!-- 当图片列表存在时，展示图片查看器 -->
       <el-image-viewer v-if="imageList" :images="imageList" @current-change="handleCurrentChange"></el-image-viewer>
     </div>
   </template>

3. 定义组件的数据和事件处理器：

   <script>
   export default {
     data() {
       return {
         imageList: [
           // 图片数据数组，每个元素包含url属性
         ],
         currentImageIndex: 0,
       };
     },
     methods: {
       handleCurrentChange(index) {
         this.currentImageIndex = index;
       },
     },
   };
   </script>

确保在`data`对象中定义了一个图片数组，然后你可以根据需要传递给`<el-image-viewer>`组件。组件会显示图片列表，用户可以点击切换图片。