解决ant design vue 在table中异步显示图片问题

最新推荐文章于 2023-02-22 09:26:00 发布

Hello攻城狮

最新推荐文章于 2023-02-22 09:26:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue ant

本文链接：https://blog.youkuaiyun.com/weixin_42912237/article/details/118889414

前端同时被 3 个专栏收录

27 篇文章

订阅专栏

vue

22 篇文章

订阅专栏

ant

2 篇文章

订阅专栏

本文探讨了在前端开发中遇到的一个挑战：如何处理table列表中包含权限认证图片的情况。当只有图片ID且需要异步获取时，通过在插槽中调用预览文件API并更新数据实现图片加载。然而，初始尝试的DOM刷新方法导致了死循环。最终采用了一种策略，即每次图片下载完成时更新DOM，成功显示了图片。这种方法虽然有效，但可能不是最优化的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的问题是，table列表中有图片，但后端只给了id，而且图片预览有权限认证，所以直接把图片路劲放入src行不通，只能异步去拿，首先我想到的办法是，在插槽中去调用图片预览的方法：就像这种

<--!             htm           -->
            <div class="custom-table-column-icon">
              <span v-if="scope.headImgUrl" ><img height="48px" width="48px" :src="scope.imgUrl"/>{{scope.imgUrl?'':viewImg(scope)}}</span>
              <span class="author" v-else>{{ scope.employeeName.substring(scope.employeeName.length - 2) }}</span>
            </div>
<--!               js                -->
    viewImg(scope) {
      API.userManage.previewFile(scope.headImgUrl).then(res => {
        let blob = res.data;
        if (res.data.data) {
          blob = res.data.data
        }
        let reader = new FileReader();
        reader.readAsDataURL(blob);  // 转换为base64
        reader.onload = function () {
          // resolve(reader.result)
          scope['imgUrl'] =reader.result
        }

这样确实可以把图片下载保存到列表中，但是dom却不能刷新，试过this.$forceUpdate这是异步的，会死循环。

所以后面我采用了一个笨方法：每次图片下载完更新一次dom：
在这里插入图片描述