关于element-ui组件库的el-image组件在大图预览时，需要展示图片的同时展示图片名称，点击上一页，下一页时需要动态获取图片的名称，以及在点击不同下标图片时，需要展示当前下标的图片的需求。

概要

关于element-ui组件库的el-image组件在大图预览时，需要展示图片的同时展示图片名称，点击上一页，下一页时需要动态获取图片的名称，以及在点击不同下标图片时，需要展示当前下标的图片的需求。（以下为个人思路，大佬请略过）

注意事项

注意：由于我的业务场景是在表格里面，需要点击图片文字预览图片，并且数据没有返回图片名称，所以我需要对图片名称进行处理。

解决思路

首先，当用户点击图片时，有三种情况。分别是当用户点击的为第一张图片时，当用户点击的第X张图片时，当用户点击的是和上一次点击时的图片。
其次，要对点击大图预览时，添加照片的名称
最后，预览时点击翻页按钮，需要动态获取图片的名称。

相关代码

src为传过来的图片地址，index为下标。

		<template slot-scope="{ row, $index }">
            <el-image
              style="width: 0px; height: 0px"
              class="hideImgDiv"
              :ref="`preview${$index}`"
              fit="contain"
              lazy
              :preview-src-list="srcList2"
            >
            </el-image>
            <span
              class="fileName"
              style="cursor: pointer"
              @click="clickImage(row.generateImgPath, $index)"
              >{{ row.generateImgPath | splitName }}</span
            >
          </template>

clickImage(src, index) {
      let name = src.split("/").pop();
      if (this.lastMovedIndex === index) {
        // 如果上一次已经移动过这个索引，则不执行任何操作
        this.$nextTick(async () => {
          let el = "preview" + index;
          await this.$refs[el].clickHandler();
          let oldDom = document.getElementsByClassName(
            "el-image-viewer__actions"
          )[0];
          let newDom = document.createElement("span");
          console.log("name", name);
          let newContent = document.createTextNode(name);
          newDom.appendChild(newContent);
          oldDom.appendChild(newDom);
          let next = document.getElementsByClassName(
            "el-image-viewer__next"
          )[0];
          let prev = document.getElementsByClassName(
            "el-image-viewer__prev"
          )[0];
          next.addEventListener("click", function () {
            let imgDiv = document.getElementsByClassName(
              "el-image-viewer__canvas"
            )[0];
            let imageUrl = imgDiv.getElementsByTagName("img")[0].src;
            let imageName = imageUrl.split("/").pop();
            let imgTitle = oldDom.getElementsByTagName("span")[0];
            imgTitle.innerText = imageName;
          });
          prev.addEventListener("click", function () {
            let imgDiv = document.getElementsByClassName(
              "el-image-viewer__canvas"
            )[0];
            let imageUrl = imgDiv.getElementsByTagName("img")[0].src;
            let imageName = imageUrl.split("/").pop();
            let imgTitle = oldDom.getElementsByTagName("span")[0];
            imgTitle.innerText = imageName;
          });
        });
        return;
      }
      if (index === 0) {
        // 当索引为0时，不改变数组
        this.srcList2 = this.srcList;
        this.lastMovedIndex = index; // 更新上一次移动的索引
        this.$nextTick(async () => {
          let el = "preview" + index;
          await this.$refs[el].clickHandler();
          let oldDom = document.getElementsByClassName(
            "el-image-viewer__actions"
          )[0];

          let newDom = document.createElement("span");
          console.log("name", name);
          let newContent = document.createTextNode(name);
          newDom.appendChild(newContent);
          oldDom.appendChild(newDom);
          let next = document.getElementsByClassName(
            "el-image-viewer__next"
          )[0];
          let prev = document.getElementsByClassName(
            "el-image-viewer__prev"
          )[0];
          next.addEventListener("click", function () {
            let imgDiv = document.getElementsByClassName(
              "el-image-viewer__canvas"
            )[0];
            let imageUrl = imgDiv.getElementsByTagName("img")[0].src;
            let imageName = imageUrl.split("/").pop();
            let imgTitle = oldDom.getElementsByTagName("span")[0];
            imgTitle.innerText = imageName;
          });
          prev.addEventListener("click", function () {
            let imgDiv = document.getElementsByClassName(
              "el-image-viewer__canvas"
            )[0];
            let imageUrl = imgDiv.getElementsByTagName("img")[0].src;
            let imageName = imageUrl.split("/").pop();
            let imgTitle = oldDom.getElementsByTagName("span")[0];
            imgTitle.innerText = imageName;
          });
        });
        return;
      }
      if (index >= this.srcList.length) {
        return;
      }
      // 将索引之前的元素移动到数组末尾
      const beforeIndex = this.srcList.slice(0, index);
      const afterIndex = this.srcList.slice(index);
      this.srcList2 = afterIndex.concat(beforeIndex);
      this.lastMovedIndex = index; // 更新上一次移动的索引
      this.$nextTick(async () => {
        let el = "preview" + index;
        await this.$refs[el].clickHandler();
        let oldDom = document.getElementsByClassName(
          "el-image-viewer__actions"
        )[0];

        let newDom = document.createElement("span");
        console.log("name", name);
        let newContent = document.createTextNode(name);
        newDom.appendChild(newContent);
        oldDom.appendChild(newDom);
        let next = document.getElementsByClassName("el-image-viewer__next")[0];
        let prev = document.getElementsByClassName("el-image-viewer__prev")[0];
        next.addEventListener("click", function () {
          let imgDiv = document.getElementsByClassName(
            "el-image-viewer__canvas"
          )[0];
          let imageUrl = imgDiv.getElementsByTagName("img")[0].src;
          let imageName = imageUrl.split("/").pop();
          let imgTitle = oldDom.getElementsByTagName("span")[0];
          imgTitle.innerText = imageName;
        });
        prev.addEventListener("click", function () {
          let imgDiv = document.getElementsByClassName(
            "el-image-viewer__canvas"
          )[0];
          let imageUrl = imgDiv.getElementsByTagName("img")[0].src;
          let imageName = imageUrl.split("/").pop();
          let imgTitle = oldDom.getElementsByTagName("span")[0];
          imgTitle.innerText = imageName;
        });
      });
    },

小结

希望大家永无BUG！！！🐱‍🚀🎉