{"size": 806, "ext": "js", "max_stars_repo_path": "src/pages/Image.js", "max_stars_repo_name": "LiuChangFreeman/gitcourse", "max_stars_repo_stars_event_min_datetime": "2019-10-16T03:18:27.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-14T23:54:32.000Z", "max_issues_repo_path": "src/pages/Image.js", "max_issues_repo_name": "LiuChangFreeman/gitcourse", "max_issues_repo_issues_event_min_datetime": "2019-10-14T15:32:47.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-17T19:26:25.000Z", "max_forks_repo_path": "src/pages/Image.js", "max_forks_repo_name": "LiuChangFreeman/gitcourse", "max_forks_repo_forks_event_min_datetime": "2019-10-16T08:44:23.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-21T11:06:57.000Z"}
{"max_stars_count": 30, "max_issues_count": 41, "max_forks_count": 25, "avg_line_length": 23.0285714286, "max_line_length": 83, "alphanum_fraction": 0.5620347395}
import React, {Component} from "react";
import {inject, observer} from "mobx-react";

class Image extends Component {
  state = {
    src: this.props.src,
    dsrc: '',
  };

  async componentDidMount() {
    if (this.state.src.substr(0, 4) === 'http') {
      this.setState({dsrc: this.state.src});
    }
    else {
      const fs=this.props.store.pfs;
      const path=`${this.props.store.dir}${this.props.src}`;
      try{
        const data=await fs.readFile(path);
        this.setState({
          dsrc: window.URL.createObjectURL(new Blob([data]))
        })
      }
      catch (e) {
        console.log(e);
      }
    }
  }

  render() {
    return (
      <img src={this.state.dsrc} style={{maxWidth: '100%'}} alt={this.state.dsrc}/>
    );
  }
}
export default inject('store')(observer(Image));