title: Replacing text from string with an image using flask
body: <p>I have written a piece of code that matches if the string has anything of the pattern text.someExtension, In my case, it would be fileName.png in the string, converts it into an img tag and displays on the HTML file using python and flask. Let us take the example string: 
  "What is the output of this program? e.png" 
  the code matches e.png and it then replaces e.png by</p>
  
  <pre><code>"&lt;br&gt;&lt;img src="{{url_for('static', filename='pics/e.png')}}" /&gt;&lt;br&gt;"
  </code></pre>
  
  <p>The image e.png is put in the folder pics inside the static folder.
  If this string is pushed into a flask variable even by adding Markup() to it it isn't rendering the image but showing the following output.</p>
  
  <p><a href="https://i.stack.imgur.com/61hBQ.jpg" rel="nofollow noreferrer">output on html page</a></p>
  
  <p>why is it so? Any way to make it display the image e.png?</p>
  
  <p>my code is:</p>
  
  <pre><code>import re
  from flask import Flask,  Markup, render_template
  app = Flask(__name__)
  
  def rep(x):
      text = re.findall(r'\w+[.]\w+', x)
      for i in text:
          b ="&lt;img src=\"{{ url_for('static',filename='pics/"+i+"')}}\"&gt;"
          x=x.replace(i,b)
      return x
  
  @app.route('/')
  def home():
      a = "What is the output of this program? e.png"
      a = rep(a)
      return render_template('new.html',var=Markup(a))
  
  if __name__ == '__main__':
      app.run(debug=True, host='localhost', port=8032)
  </code></pre>
  
  <p>And the HTML file is,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    {{var}}
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>