title: How to convert multiple image in base64 and return in json format and display in html?
body: <p>I want to convert multiple images into base64 and return in json format. At the same time, I want to display in my html templates. When I run my code it's works perfectly, but the result only display certain result only. Below I attach my result. I am also fail to display my json data in html templates. Here I attach my code.</p>
  
  <p><a href="https://i.stack.imgur.com/6WHXL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6WHXL.png" alt="enter image description here"></a></p>
  
  <p><strong>app.py</strong></p>
  
  <pre><code>@app.route("/api/images")
  def get_images():
      directory = os.listdir('C:/Users/HP/Miniconda3/envs/count_vechicle/coding/images')
      os.chdir('C:/Users/HP/Miniconda3/envs/count_vechicle/coding/images')
      data={}
      for file in directory:
          base = os.path.basename(file)
          data["label"] = base
          open_file = open(file,'rb')
          image_read = open_file.read()
          image_64_encode = base64.encodebytes(image_read)
          data["data"] = image_64_encode.decode('ascii') 
          final_data = json.dumps(data,sort_keys = True, indent = 4, separators = (',', ': '))
          print(final_data)
          #return final_data
          return render_template("images.html", final_data=final_data)
  </code></pre>
  
  <p><strong>Images.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
   &lt;body&gt;
     &lt;h1 class="logo"&gt;Results&lt;/h1&gt;
  
     &lt;ul&gt;
      {% for data in final_data %}
      &lt;li&gt;{{final_data}}&lt;/li&gt;
      &lt;img src={{data.da}}&gt;
      {% endfor %}
     &lt;/ul&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>