Javascript 在draftjs编辑器中显示图像

我正在使用draftjs编辑器。我可以渲染内容，但无法显示图像。使用draftjs时如何显示图像？现在只显示url而不是图像

img src=”http://image_url“style=”精氨酸：30px自动；最大宽度：350px；”

很抱歉，我无法使用img标记html方式，因此排除了标记语法

function findImageEntities(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(character => {
    const entityKey = character.getEntity();
    return (
      entityKey !== null &&
      contentState.getEntity(entityKey).getType() === "IMAGE"
    );
  }, callback);
}

const Image = props => {
  const { height, src, width } = props.contentState
    .getEntity(props.entityKey)
    .getData();
  return <img src={src} height={height} width={width} />;
};
class AdminEditor extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      editorContent: undefined,
      contentState: "",
      touched: false
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.htmlMarkup !== this.props.htmlMarkup) {
      const content = nextProps.htmlMarkup;
      const blocksFromHTML = convertFromHTML(content);
      const plainState = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap
      );
      this.setState(state => ({
        editorState: EditorState.createWithContent(plainState, decorator)
      }));
    }
  }

  onEditorStateChange = editorState => {
    this.setState({
      editorState
    });
  };

  onEditorChange = editorContent => {
    this.setState({
      editorContent
    });
  };

  handleChange = event => {
    this.props.setEditorState(
      this.state.editorState.getCurrentContent().hasText() && this.state.touched
    );
  };

  render() {
    const { editorState } = this.state;
    const { stateOfEditor } = this.props;
    return (
      <div>
        <Editor
          tabIndex={0}
          editorState={editorState}
          initialContentState={this.props.htmlMarkup}
          toolbarClassName="home-toolbar"
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            history: { inDropdown: true },
            inline: { inDropdown: false },
            link: { showOpenOptionOnHover: true },
            image: {
              uploadCallback: this.imageUploadCallBack,
              defaultSize: { height: "auto", width: "50%" }
            }
          }}
          onContentStateChange={this.onEditorChange}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default AdminEditor;

函数findImageEntities（contentBlock、回调、contentState）{
contentBlock.findEntityRanges（字符=>{
const entityKey=character.getEntity（）；
返回(
entityKey！==null&&
contentState.getEntity（entityKey）.getType（）=“图像”
);
}，回调）；
}
const Image=props=>{
const{height，src，width}=props.contentState
.getEntity（props.entityKey）
.getData（）；
返回；
};
类AdminEditor扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
editorState:editorState.createEmpty（），
编辑器内容：未定义，
内容状态：“”，
感动：错
};
}
组件将接收道具（下一步）{
if（nextrops.htmlMarkup！==this.props.htmlMarkup）{
const content=nextrops.htmlMarkup；
const blocksFromHTML=convertFromHTML（内容）；
const plainState=ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks，
blocksFromHTML.entityMap
);
this.setState（state=>({
editorState:editorState.createWithContent（纯状态，装饰器）
}));
}
}
onEditorStateChange=editorState=>{
这是我的国家({
编辑状态
});
};
onEditorChange=editorContent=>{
这是我的国家({
编辑内容
});
};
handleChange=事件=>{
this.props.setEditorState(
this.state.editorState.getCurrentContent（）.hasText（）&&this.state.com
);
};
render（）{
const{editorState}=this.state；
const{stateOfEditor}=this.props；
返回(
);
}
}
导出默认管理员编辑器；

---

decorator的精确副本位于findImageEntities的顶部，我没有粘贴它只是为了减少代码行数

我看到了道具onEditorStateChange={this.onEditorStateChange}。我怀疑你使用的是草稿js wysiwyg而不是草稿js。 在js wysiwyg草案中，您可以访问：