【无标题】用于列表图片后台返回id，前端依据id从文件服务器获取懒加载

 

    <el-table-column label="图片" class-name="has-img">

          <template slot-scope="scope">

            <img   :data-url="scope.row.image" alt="" style="width: 36px; height: 36px"                     @click="previewImg(scope.row.image)" />

        

          </template>

        </el-table-column>

let refreshId = '',//修改后图片id刷新标识

  updateId = '',//修改标识

  updateFlag = false,//修改标识

updated() {

    let zxxObserver = new IntersectionObserver(function (entries) {

      entries.forEach(function (entry) {

        if (entry.isIntersecting) {

          if (Array.from(entry.target.classList).includes('has-img')) {

            if (entry.target.children[0].children.length && entry.target.children[0].children[0].dataset.url && (!entry.target.children[0].children[0].src || (updateFlag && entry.target.children[0].children[0].dataset.url === refreshId))) {

             let id = !entry.target.children[0].children[0].src ? entry.target.children[0].children[0].dataset.url : updateId

          getpicPreView({ id }).then(res => {

          const imageBlob = new Blob([res], { type: 'image/jpeg' })

      entry.target.children[0].children[0].src = URL.createObjectURL(imageBlob)

urlMap.set(id, entry.target.children[0].children[0].src)

         })

         }

          }

        }

      })

    })

    document.querySelectorAll('.el-table .el-table__body-wrapper .el-table__body tbody .el-table__row td').forEach(function (ele) {

      zxxObserver.observe(ele)

    })

  },