img 带请求头token

框架： vue

刚收到这个需求的时候整个人都是懵的，然后开始比较深入了解图片的生成原理。
一般开发中，后端会直接传一个图片的尾部路径过来，然后我们直接通过拼接去获取。其实这个过程中和我们请求api一样的原理，都是后端返回一个东西，只不过获取图片的话，后端是直接返回‘图片’，我们通过src直接渲染成图片。那我们现在，要在调用的时候，给予一个token请求头。那么直接在src中拼接肯定就不行的啦。
看了下网上的方法，几乎用的都是很原始的那种请求方式，以下我将讲解的是我们日常使用的axios请求方式。

在我们api文件中：

export function getImges (data) {
  return request({
    url: data,
    responseType: "blob",
    method: 'get'
  })
}

在需要渲染图片的文件中：

<template slot-scope="scope">
    <span
       v-for="(item, index) in scope.row.photoList">
       //图片显示 在slot中写入你图片的完整路径
       <img ref="imageRef" :slot="`${path}/files/getImages/${item.photoPath}`"></img>
   </span>
</template>
<script>
import { getImges } from '@/api/maintenanceRecoed'
export default {
updated() {
    this.$nextTick(async function() {
      for (let i = 0; i < this.$refs.imageRef.length; i++) {
        const url = this.$refs.imageRef[i].slot
        //调用接口获取图片
        const resData = await getImges(url)
        //生成一个对象URL
        this.$refs.imageRef[i].src = URL.createObjectURL(resData.data)
        this.$refs.imageRef[i].onload = () => {
          URL.revokeObjectURL(this.$refs.imageRef[i].src)
        }
      }
    })
  },
}
</script>

我做的途中遇到什么坑了呢？

1. 我当时把逻辑实现写在method中，调用方法写在img里面，因为使用了 v-bind （响应式更新），因此改变页面的大小也会不断重复请求图片。
2. 其实我刚开始用的是网上的那种方式，用id来生成图片，但我的图片是很多的，那必须每个id都要不同呀，不然就是不断的在一个地方更换图片。但是id要一一对应的话，对我的项目来说就比较繁了，然后刚好早上的时候去学习了ref,就想到了用ref来写，事实证明 我可真是个聪明的美女呀 哈哈哈。

插件：其源码是把图片转化为base64，因此不适宜用在大图片之中。vue-auth-image，同时引入图片放大缩小旋转等的插件 v-viewer
main.js中

import VueAuthImage from 'vue-auth-image';
Vue.use(VueAuthImage);

import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
Vue.use(VueViewer)

         <template slot-scope="scope">
           // 在span中写入 v-viewer
            <span
              v-viewer
              v-for="(item, index) in scope.row.maintenancePhotoList"
            >
              //v-auth-image 里面放置图片地址
              //我在src中放了一张图片加载成功之前的显示图片
              <img
                v-auth-image="
                  `${path}/files/getImages/maintenance-record/${item.photoPath}`
                "
                class="image"
                src="../../assets/imgs/loading.gif" 
              /> 
            </span>
          </template>