Javascript 如何显示FastAPI'；里面的文件响应图像有什么反应？

这是我的前端代码：

import*as React from'React'；
从“react”导入{useffect，useState}；
从“./http common”导入http；//axios
类型照片={
文件名：string，
描述：字符串，
标签：字符串[]。
};
const BrowserArticle=（{filename，caption，tags}:Photo）=>{
const[photoFile，setFile]=useState（“”）；
useffect（（）=>{
http.get（`/api/getImg/${filename}`）
。然后（（响应）=>{
console.log（typeof response.data）；//控制台输出为“string”
console.log（响应）；//参见下面的屏幕截图
setFile（数据）；
});
}, []);
返回(
{标题}
{
tags.map（（tag）=>tag）
}
);
};

这是我的后端FastAPI代码：

从fastapi导入fastapi
从fastapi.responses导入文件响应
从fastapi.staticfiles导入staticfiles
app=FastAPI（）
mount（'/static'，StaticFiles（directory='static'），name='static'）
@app.get（'/api/getImg/{image_filename}'）
异步def get_image（image_文件名：str）->FileResponse:
返回FileResponse（f'./static/uploads/{image_filename}'）

CORS已经处理好了。当我向服务器发送请求时，成功接收到响应，但无法加载映像。检查后，这是生成的HTML：

当我在

then（）

函数中

console.log（data）

时，我得到的是：

当我使用FastAPI的内置工具测试API时，我验证了API是否成功返回

blob:http://192.168.1.201:8000/0a870a00-cf63-43ef-b952-e49770137fdd

我怀疑axios接收到的数据是图像文件本身，因此我尝试如下更改代码：

const[photoFile，setFile]=useState（null）；
// ...

但是当我刷新页面时，我得到

TypeError:无法在“URL”上执行“createObjectURL”：重载解析失败。

我尝试搜索如何正确显示从后端接收的图像，但我找到的唯一结果讨论了如何将图像发送到后端或如何显示上载到服务器的图像（即显示通过

选择上载的文件的缩略图）。与此特定问题无关。有什么想法吗

更新：执行以下操作时，图像成功显示：

但这意味着在生成的HTML中公开我的后端，并对后端IP进行硬编码。有没有更“合适”的方法