框架: 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>
我做的途中遇到什么坑了呢?
- 我当时把逻辑实现写在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
<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>