title: Display image with Python-Flask template engine
body: <p>I want to send binary image data to a template via Flask (to avoid buffering from browser). Python file is as follows:</p>
  <pre><code>#!/usr/bin/python3
  import base64
  from flask import Flask,make_response,render_template
  
  app = Flask(__name__)
  
  @app.route('/')
  def showdata():
  
      fp = open(&quot;sp.png&quot;,&quot;rb&quot;)
      sp = base64.b64encode(fp.read())
      fp.close()
      fp = open(&quot;sg.png&quot;,&quot;rb&quot;)
      sg = base64.b64encode(fp.read())
      fp.close()
      wav = None
  
      resp = make_response(render_template('index.html',sg=sg,sp=sp))
      
      return resp
  
  if __name__ == '__main__':
      app.run(host='0.0.0.0', port=3000,debug=True)
  </code></pre>
  <p>HTML file is:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Show Timeswipe Measurements!&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- show data and spectrum --&gt;
      &lt;img id='spectrum' src='data:image/png;base64,{{ sp }}'&gt;
    
      &lt;!-- show spectrogram --&gt;
      &lt;img id='spectrogram' src='data:image/png;base64,{{ sg }}'&gt;
  
      &lt;!-- show wav --&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Images are not shown. The src is <code>&lt;img id='spectrum' src='data:image/png;base64,b&amp;#39;iVBOR...</code>, i.e. there seems to be some additional characters at the beginning of the image <code>b&amp;#39;i</code>.</p>
  <p>What would be the right way to send binary image data via template engine.</p>