Question

我尝试编写一个组件，用于呈现从REST服务器获取的图片。我必须在服务器端获取图片，因为我不想将REST服务器暴露给Internet。因此，我不能简单地提出一个＆＃34; img＆＃34;标签在HTML中。（REST-Server在与Meteor-Server相同的系统上运行）。

让我们说，流星法＆＃34; get_picure＆＃34;从REST服务器获取图片并将其返回到组件。返回的对象是来自同步HTTP.call请求的简单结果。

Picture.jsx

import React, { Component, PropTypes } from 'react';

export default class Picture extends Component {
  propTypes: {
    picture: PropTypes.string.isReqired,
    style: Proptypes.object,
  }

  constructor(props) {
    super(props);

    this.state = {
      pic: null,
      style: this.props.style
    }

    //invoke the server to fetch the picture
    Meteor.call("get_picture", this.props.picture, this.update.bind(this));
  }

  //callback for Meteor.call
  update(error,data) {
    if(error || data.statusCode != 200) {
      return;
    }

    //data.content is an "uint8Array" due to the { npmRequestOptions: {encoding: null}} option set in the HTTP-Request
    this.setState({pic: data.content});
  }

  render() {
    return (
      <span style={this.state.style}>
        { this.state.pic ? this.state.pic : "" }
      </span>
    )
  }
}

我得到的是，数字显示在给定的＆＃34; span＆＃34; -tag。

中

有没有办法，从状态变量显示图片？

Answer 1

经过一番谷歌搜索，我找到了答案。一个可行的解决方案是将现有的uint8array编码为base64。

export default class Picture extends Component {
...
    update(error,data) {
        ...
        //encode to base64
        var image = btoa(String.fromCharCode.apply(null, data.content);

        this.setState({pic: "data:image/png;base64," + image});
    }
...
}

要显示此内容，我将src - 属性从<img /> - 标记设置为this.state.pic。这会导致所提取的图像显示在生成的<img /> - 标记中。

注意："data:image/png"表示已获取图片中的内容类型，可以替换为任何其他图片内容类型（例如image/jpeg）。

Meteor React：从数组缓冲区渲染图像

1 个答案: