简介
后台返回了上传的图片url地址,前端来渲染
我在vue3中使用<img src="xxx" />来渲染图片时,出现401,原因是图片需要token才能访问
解决方法(三种)
- 第一种:正常的做法是把token跟着url后面,后台来鉴权。
- 第二种:后台返回base64不要返回url。
- 第三种:如果后台不愿修改,那么采用这种方法:
// 源码
<template>
<img :src="imageUrl">
</template>
<script setup>
import axios from 'axios';
const imageUrl = ref('');
async function fetchImage() {
const response = await axios.get('path/to/image.jpg', {
responseType: 'arraybuffer',
headers: {
'Custom-Header': 'value'
}
});
// 将二进制数据转换为 Blob,再将其 URL 设置为 img src
imageUrl.value = URL.createObjectURL(new Blob([response.data]));
}
// 在组件挂载完成后调用 fetchImage
onMounted(() => {
fetchImage();
});
</script>
tip
如果你封装了axios的话,可以使用:
// 图片转二进制
export async function fetchImage(fileName) {
return new Promise(async resolve => {
const response = await request({
url: `path/to?fileName=${fileName}`,
method: 'get',
responseType: 'arraybuffer'
})
const res = URL.createObjectURL(new Blob([response.data]))
resolve(res)
})
}
如果配置了拦截器可能还需要在拦截器地方配置:
instance.interceptors.response.use(
res => {
// 如果是 Blob 类型的响应,则直接返回 Blob 数据
if (res.config.responseType === 'arraybuffer') {
return res
}