时间戳

首页 > 解决方案 > 如何从 React 中的 api 获取字节数组图像

reactjs - 如何从 React 中的 api 获取字节数组图像

问题描述

我正在使用 React 前端和 ASP.NET Core Web API 后端编写应用程序。我想通过GETAPI 的请求发送一些图像：

[Route("getimage")]
[HttpGet]
public async Task<IActionResult> GetImage()
{
    var objectWithImage = db.SomeTable.SingleOrDefault();

    byte[] image = objectWithImage.SomeImage;

    return Ok(image);
}

如您所见，这是一种非常简单的方法，可以从数据库中获取我想要的图像并将其发送到站点。图像保存为byte数组。

现在在前面，我正在尝试获取此图像并将其显示在<img src={this.state.image}>

class SomeClass extends React.Component {

    constructor(props) {
        super(props);
        this.props = props;
        this.state = {
            image: null,
        }
    }

async getImage() {
    fetch("http://localhost:5000/api/controller/getimage")
    .then(response => response.json())
    .then(data => {
        console.log(data)
        this.setState({
           image: data

       })
   })
   console.log(this.state.image)
}

显然不行，第一个console.log是正常显示二进制数据，第二个setState是我说之后image的日志null。

如何byte[]正确获取图像并将其显示在页面上？我试图查看其他一些类似的线程，但似乎没有修复工作。我很新反应任何帮助表示赞赏

标签： reactjs

解决方案

您可以通过连接将字节数组转换为图像，"data:image/png;base64," + data; 您可以说this.setState({image: "data:image/png;base64," + data;})

    async getImage() {
    fetch("http://localhost:5000/api/controller/getimage")
    .then(response => response.json())
    .then(data => {
        console.log(data)
        this.setState({
           image: data

       })
   })
   console.log(this.state.image) // *1
}

*1 行是 print null 因为这发生在this.setState. 并将this.setState触发渲染功能，然后您的图像将显示出来。

希望它会有所帮助:)

推荐阅读