问题：前端发送axios请求，后端响应图片输出流，前端处理显示图片，后端正常返回图片输出流，但是前端却无法显示，不知道是不是我方式错误
我的思路：src中调用函数，函数内部发送请求，然后将图片的响应输出流作为函数的返回值，img的src接收返回值显示图片，代码如下：
请求：
export function getIcon(iconInfo) {
return request({
method: 'post',
url: apiUrl + 'getImage',
data: iconInfo,
responseType: 'blob'
})
}
<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.iconUrl!=null"><img :src="sendIcon(item.iconUrl)" 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.iconUrl!=null">
<img :src="sendIcon(item.iconUrl)" alt="" class="icon_class"/>
</el-icon>
<span>{{ item.name }}</span>
</el-menu-item>
</template>
</div>
<script>
import {getIcon} from '@/api/home/file/index'
export default ({
name: 'menuTree',
props: ['menuList'],
setup(props) {
function sendIcon(filePath) {
// 获取菜单图片路径
if (filePath != null) {
let FileInfoVo = {
//封装请求参数
filePath: filePath
}
//获取图片输出流
return getIcon(FileInfoVo).then(res => {
return res.data
})
}
}
return {
sendIcon
};
}
})
</script>
其中关键代码如下：
<el-icon v-show="item.iconUrl!=null"><img :src="sendIcon(item.iconUrl)" alt="" class="icon_class"/></el-icon>
<img :src="sendIcon(item.iconUrl)" alt="" class="icon_class"/>
function sendIcon(filePath) {
// 获取菜单图片路径
if (filePath != null) {
let FileInfoVo = {
//封装请求参数
filePath: filePath
}
//获取图片输出流
return getIcon(FileInfoVo).then(res => {
return res.data
})
}
}
后端返回结果正常
但是图片却无法显示
网上说通过Blob来处理
我修改后仍然不能显示图片
检查元素里面却是一个promise对象
奇怪的是我这里输出结果是一个值并非元素里面的是一个promise对象
