javascript - 如何将来自Nodejs后端的图像渲染为res.json（）？

问题描述

所以我从 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"

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

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)

    }

结果是

标签： javascriptnode.jsreactjsaxios

该BufferAPI 是节点的一部分，除非您使用像这样的外部库，否则它将无法在浏览器上运行。我会假设你已经在使用它:-)

以下行不正确：

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

你应该这样做：

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

javascript - 如何将来自Nodejs后端的图像渲染为res.json（）？

问题描述

解决方案

推荐阅读