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"><spanv-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)//生成一个对象URLthis.$refs.imageRef[i].src = URL.createObjectURL(resData.data)this.$refs.imageRef[i].onload = () => {URL.revokeObjectURL(this.$refs.imageRef[i].src)}}})},
}
</script>

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

我当时把逻辑实现写在method中，调用方法写在img里面，因为使用了 v-bind （响应式更新），因此改变页面的大小也会不断重复请求图片。
其实我刚开始用的是网上的那种方式，用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<spanv-viewerv-for="(item, index) in scope.row.maintenancePhotoList">//v-auth-image 里面放置图片地址//我在src中放了一张图片加载成功之前的显示图片<imgv-auth-image="`${path}/files/getImages/maintenance-record/${item.photoPath}`"class="image"src="../../assets/imgs/loading.gif" /> </span></template>

img 带请求头token相关推荐

response响应对象参数和方法是啥？怎么发送带请求头的请求（headers参数）怎么发送带参数的请求？cookieJar的转换方法是什么？
在python里所有变量都是对象 import requestsurl = 'http://www.baidu.com/'respone = requests.get(url)# 参数 # 响应的ur ...
java soap协议头_自己调用webservice方法总结（带请求头SoapHeader）
调用webservice总结:1.加入第三方的jar包 Ksoap2-android-XXX2.访问响应的webservice的网站,查看响应的信息,得到nameSpace,methodName,ur ...
拦截器获取请求参数post_「SpringBoot WEB 系列」RestTemplate 之自定义请求头
[WEB 系列]RestTemplate 之自定义请求头上一篇介绍了 RestTemplate 的基本使用姿势,在文末提出了一些扩展的高级使用姿势,本篇将主要集中在如何携带自定义的请求头,如设置 U ...
Ajax设置自定义请求头的两种方法
用自定义请求头token为例方法一 $.ajax({type: "post",url:"http://127.0.0.1:4564/bsky-app/template/ ...
.ajax 自定义headers,Ajax设置自定义请求头的两种方法
示例用自定义请求头token为例方法一 $.ajax({ type: "post", url:"http://127.0.0.1:4564/bsky-app/templ ...
axios原生请求设置请求头
工作中项目使用的是前端的Vue框架,请求用的是自己封装好的axios,api请求均已封装成方法,在页面中使用时直接import 然后写在自己的自定义触发方法中即可. 然而遇到一个棘手的问题就是有一个超 ...
vue+axios请求时设置request header请求头（带上token）
vue+axios请求时设置请求头(带上token) 1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值(本地存储的token,wind ...
delphi接口带上请求头是什么意思_Python接口自动化之Token详解及应用
------·今天距2021年258天·------ 这是ITester软件测试小栈第113次推文在上一篇Python接口自动化测试系列文章:Python接口自动化之cookie.session应用 ...
delphi接口带上请求头是什么意思_python接口自动化（二十）--token登录（详解）...
简介为了验证用户登录情况以及减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮.有些登录不是用 cookie 来验证的,是用 token 参数来判断是否登录.token 传参有两种一种是放在请 ...

img 带请求头token

img 带请求头token相关推荐

最新文章

热门文章