Javascript 如何在JS中对二进制图像进行base64编码以供浏览器显示

我们在浏览器中显示从REST后端API接收的二进制图像（实际上是Chrome）时遇到问题。在Java中定义的后端REST端点如下

@GetMapping(path = "/images/{imageId:\\d+}/data", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public @ResponseBody byte[] getImageData(@PathVariable long imageId) {
    return ... skipped ...
}

在前端，我们执行以下步骤：

通过

fetch

JS方法调用请求图像数据

因此，在前端，我们有这种格式的原始二进制图像数据（到目前为止还不错，它实际上是JPEG二进制数据）。附加源JPEG

然后我们调用此代码来接收base64编码的图像

因此，我们得到了一些类似于base64编码的数据

我们试图将base64编码的数据放入

元素，但没有成功：(

---

因此，问题是如何在前端接收正确的base64图像以供浏览器显示？我们做错了什么？

以下是一些基于上述@somethinghere注释的工作代码。请注意

getImage

中如何处理

响应

：

函数getImage（id）{ 回传(`https://placekitten.com/200/140`, { 方法：“GET”， })。然后（响应=>{

---

返回response.blob（）；//我无法测试，因为您粘贴了一个图像而不是原始数据：/…但我会尝试在某些

标记的src属性中使用它。您是否也可以发布步骤1的前端代码？数据url中的类型应为

图像/jpeg

，而不是

应用程序/octet流

。可能是

返回的重复响应。文本（）；，尝试使用<代码>返回响应.Bub（）；< /Cord>并直接将响应导入到 Read StaseDall 中，在可能出错的中间删去混乱的转换步骤。
    async function getImage(id) {
        return await fetch(`${URL}/images/${id}/data`, {
            method: 'GET',
            headers: new Headers(HEADERS)
        }).then(response => {
             return response.text();
        });
    }

    let reader = new FileReader();
        reader.addEventListener('loadend', event => {
        console.log(event.srcElement.result)
    });

    reader.readAsDataURL(new Blob([data]));