title: Displaying PNG image in ArrayBuffer in React
body: <p>I am trying to get an image (PNG format) to display in a React app after making a JavaScript call. The code is as follows. The function <strong>DeviceService.getFile</strong> returns the file in a blob. The data is binary. How can I get this image to be displayed correctly in React?</p>
  
  <p>I have tried the conversion to base64 but it did not help.</p>
  
  <pre><code>DeviceService.getFile(mapOverlayImagePath, bMap1 =&gt; {
          this.setState({ MapOverlay: bMap1 })
          // this.setState({ MapOverlay: 'data:image/png;base64,' + btoa(bMap1) })
          console.log(bMap1)
        })
  </code></pre>
  
  <p>The React code to display the image:</p>
  
  <pre><code>&lt;img src={this.state.MapOverlay} alt="MapOverlay" /&gt;
  </code></pre>
  
  <p><strong>I have modified this function</strong>, the function getFile is as follows:</p>
  
  <pre><code>export function getFile(path, cb) {
    if (typeof(cb) === 'undefined' || cb === null)
      return;
  
    fetch(uris.getFile() + '/?' +
      'path=' + path,
      {method: 'POST', credentials: 'include'})
      .then(reply =&gt; reply.blob())
      .then((response) =&gt; {
        if (response.data) {
          return cb(response.data);
        }
        return cb(new Blob());
      })
  }
  </code></pre>
  
  <p>This getFile function is in a library where it is used as a dependency in the React application. </p>
  
  <p>I tried printing the blob size in the Internet Explorer console and it displayed: <code>[object Blob]: {size: 0, type: ""}</code>. I guess my getFile function is not passing the data as intended. Any error in the getFile function?</p>