vue el-table中使用带参接口异步获取图片并显示的方案

前言

        本文可以帮你使用带参接口动态获取图片并正常渲染在el-table组件中,关于为什么要使用接口动态获取而不用直接拼接获取图片地址是因为安全考虑，使用此方案可以在获取图片时加上用户的token。

正文

旧方案

        旧方案采用这种地址拼接的方式获取图片，此种方式没有限制，即便不登录只要有正确的地址也能获取到图片。

新方案

1.错误示例

        因为异步请求的原因以下方法不可用

        以下将返回的blob数据流转为本地url

        因为我的方法声明了async所以返回的是Promise对象；html渲染如下。但不使用又不能同步渲染。

2.解决方案

        于是我想到了根据ref绑定img标签，在获取图片地址后更新他的src，但table会渲染很多条数据不便绑定，我的解决方案是封装自己的一个img组件，这样组件中的img标签就是唯一的。

代码如下,其中使用原生的img标签也可以，使用element组件是想使用预览大图的功能。

<template>
    <div>
        <el-image  ref="img" src="" alt="图片"  previewSrcList=""></el-image>
    </div>
</template>
<script>
import { setAvatar } from '@/utils/avatar'
export default {
    name: 'MyImg',
    data() {
        return {
            imgUrl: ''
        }
    },
    props: ['url','preview'],
     mounted() {
        setAvatar(this.$refs.img,this.url,this.preview)
    },
    watch: {
        url: {
            handler(newValue, oldValue) {
                setAvatar(this.$refs.img,newValue)
            },
            deep: true
        }
    }

}
</script>
<style scoped>
img{
    width: 100%;
    height: 100%;
}
</style>

其中封装的setAvatar方法代码如下，方法接受三个参数（要绑定的img标签，图片路径，是否开启预览大图功能）

import { getAvatar } from '@/api/docs'

export const setAvatar = (img,url,preview) => {
  
    getAvatar(url).then(response => {
      if (response.data.size > 0) {
        img.src = window.URL.createObjectURL(new Blob([response.data]))
        if(preview){
          //图片预览功能
          img.previewSrcList = [window.URL.createObjectURL(new Blob([response.data]))]
        }
        
      }
    })
  }
  img.onload = () => {
    URL.revokeObjectURL(img.src)
  }
}

我上述获取图片的封装接口方法是getAvatar，可以在其中携带其他参数。

使用

       <el-table-column prop="logo" label="机构logo" min-width="125" align="center">
          <template slot-scope="scope">
            <myImg :url="scope.row.logo" :preview="true"></myImg>
        <!-- 需要预览大图功能加上preview 不需要不用加-->
          </template>
        </el-table-column>

我这里封装请求时会统一在请求头加上验证，这样就增加了安全系数。

至此结束，有不同意见或问题请在评论区留言。