javascript - 如何在React中渲染来自Nodejs后端的图像作为res.json()？

Question

所以我从 NodeJs 后端获取图像数据，React 前端中 axios 的响应如下:::

data: [239, 191, 189, 239, 191, 189, 239, 191, 189, 239, 191, 189, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1,…]
type: "Buffer"

现在我将 react 组件中的状态设置为

const buffered = fileResponse.data;
const based64 = new Buffer.from(buffered).toString('base64');
this.setState({ fileData : based64 })

设置状态后，我将渲染图像如下:::

<img src={`data:image/jpeg;base64,${this.state.fileData}`} 
     alt=" Not loaded" 
     onLoad = {this.loading}
     onError = {(error) => this.ImgError(error)}
/>

在渲染图标时，此过程运行良好。图标在屏幕上呈现并触发 onLoad 事件。
但是，在渲染 jpeg 图像时，onError 方法始终会被触发，并且来自后端的图像永远不会在应用程序上渲染，而只是加载 alt 标签。
我在上面的代码中做错了什么吗？
我尝试只使用 new Buffer() 方法而不是 new Buffer.from() ，这会产生相同的错误。我还尝试使用react-lazyload和react-lazy-load-image-component库延迟加载图像，这会产生相同的错误。感谢您提前的帮助。

更新:这是出现错误的函数:

ImgError = (error) => {
        console.log("on Error in image \n\n",error);
        console.log("1.",error.bubbles)
        console.log("2.",error.cancelable)
        console.log("3.",error.currentTarget)
        console.log("4.",error.defaultPrevented)
        console.log("5.",error.dispatchConfig)
        console.log("6.",error.eventPhase)
        console.log("7.",error.isDefaultPrevented)
        console.log("8.",error.isPropogationStopped)
        console.log("9.",error.isTrusted)
        console.log("10.",error.nativeEvent)
        console.log("11.",error.target)
        console.log("12.",error.timeStamp)
        console.log("13.",error.type)

    }

结果是

Answer 1

Buffer API 是 Node 的一部分，除非您使用像 this one 这样的外部库，否则它无法在浏览器上工作。 。我假设您已经在使用它了:-)

以下行不正确:

const based64 = new Buffer.from(buffered).toString('base64');

你应该这样做:

const based64 = Buffer.from(buffered).toString('base64');