vue渲染图片时出现401，需要权限

简介

后台返回了上传的图片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
    }