vue3函数如何将axios请求的返回值以字符串的格式返回

问题：

最近尝试做一个后台管理的项目练手，在做菜单栏图标的时候，发现图标不能显示。

技术前提：

vue3，后端返回图片流，前端转为base64然后循环显示

全部代码：

<template>
  <div>
    <template v-for="item in menuList" :key="item.path">
      <!-- 分为两种方式渲染：有子菜单和没有子菜单-->
  <el-sub-menu
  :index="item.path"
  v-if="item.nodeType == 1"
  >
        <template #title>
          <el-icon v-show="item.iconId!=null"><img :src="sendIcon(item.iconInfo)" alt="" class="icon_class"/></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <!-- 有子菜单的继续遍历（递归）-->
  <menuTree :menuList="item.children"></menuTree>
      </el-sub-menu>
      <!-- 没有子菜单-->
  <el-menu-item :index="item.path" v-if="item.nodeType==2">
        <el-icon v-show="item.iconId!=null">
          <img :src="sendIcon(item.iconInfo)" alt="" class="icon_class"/>
        </el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
import {getIcon} from '@/api/home/file/index'
import {computed} from 'vue'

export default ({
  name: 'menuTree',
  props: {
    menuList: {
      type: Array
  }
  },
  setup(props) {
   async function sendIcon(fileInfo) {
      // 获取菜单图片路径
  if (fileInfo != null) {
        //获取图片输出流
  let res = await getIcon(fileInfo)
        const base64Image = btoa(
            new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                '',
            ),
        );
        return 'data:image/png;base64,' + base64Image
  }
    }
    return {
      sendIcon
  };
  }
})
</script>

关键代码

<el-icon v-show="item.iconId!=null"><img :src="sendIcon(item.iconInfo)" alt="" class="icon_class"/></el-icon>

async function sendIcon(fileInfo) {
   // 获取菜单图片路径
  if (fileInfo != null) {
     //获取图片输出流
  let res = await getIcon(fileInfo)
     const base64Image = btoa(
         new Uint8Array(res.data).reduce(
             (data, byte) => data + String.fromCharCode(byte),
             '',
         ),
     );
     return 'data:image/png;base64,' + base64Image
  }
 }

效果

原因：

图片无法显示，经过仔细琢磨和搜索之后，发现是sendIcon函数的返回值在模板中变成了promise对象，

尝试的办法：
chatgpt说可以通过计算属性computed实现返回字符串，但是我试过后并没有什么用

let sendIcon = computed(() => {
  return async function (fileInfo) {
    // 获取菜单图片路径
  if (fileInfo != null) {
      //获取图片输出流
  let res = await getIcon(fileInfo)
      const base64Image = btoa(
          new Uint8Array(res.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              '',
          ),
      );
      return 'data:image/png;base64,' + base64Image
  }
  }
})

我知道可以通过一些其他方法，比如在获取菜单信息的时候，再发起获取图片流文件的时候，手动处理为一个数组，然后在模板中遍历这个独立的数组，有点麻烦，我并不想使用那种方法，我想通过现在这个方式，因为只需要将其转为字符串返回就解决了。