title: Using Pil to store image in a list and retrieve those image in a browser
body: <p>This question is not a duplicate because I have stored the image address in a dataset and i need to retrieve those images that are present in my folder using a machine learning model, store it in a list and display those images in a browser I am creating a movie recommendation system in flask. I need to display poster image along with the name, but the browser doesn't seem to view the image. Here is my code:</p>
  
  <p>app.py:</p>
  
  <pre><code>from flask import Flask,render_template
  from flask import request
  from sample import get_title_from_index
  from sample import get_poster_from_index
  from sample import similar_movies
  from flask import jsonify
  from PIL import Image
  import array as arr
  
  app = Flask(__name__)
  
  @app.route('/', methods=['GET','POST'])
  def predict():
      if 'movie_input' in request.form:
          movies = similar_movies(request.form['movie_input'])
          i=0
          print("Top 5 similar movies are:")
          e1= []
          p1=[]
          for element in movies:
              e1.insert(0,get_title_from_index(element[0]))
              image= Image.open(get_poster_from_index(element[0]))
              p1.insert(0,image)
  
              i=i+1
              if i&gt;5:
                 break
      else:
          e1 = "No movies selected. Please, select something!"
          p1 = ""
  
      return render_template('predictor.html', movie=e1,poster=p1)
  
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>
  
  <p>predictor.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form method="POST"&gt;
  &lt;input type="text" name="movie_input" maxlength="500" &gt;
  &lt;input type="submit" value="Submit" method="get" &gt;
  
  &lt;/form&gt;
  &lt;p&gt;
  {{movie[0]}}
  {{poster[0]}}
  
  &lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>sample.py</p>
  
  <pre><code>import pandas as pd
  import numpy as np
  
  from sklearn.feature_extraction.text import CountVectorizer
  from sklearn.metrics.pairwise import cosine_similarity
  df = pd.read_csv("movies.csv")
  
  
  def get_title_from_index(index):
      return df[df.index == index]["title"].values[0]
  def get_index_from_title(title):
      return df[df.title == title]["index"].values[0]
  def get_poster_from_index(index):
      return df[df.index == index]["poster"].values[0]
  
  def combine_features(row):
          return row["keywords"]+"" +row["cast"]+""+row["genres"]+""+row["director"]
  def similar_movies(movie_input):
      features = ['keywords','cast','genres','director']
      df["poster"] = df["poster"].fillna("")
      for feature in features:
          df[feature] = df[feature].fillna("") #filling all NaNs with blank string
      df["combined_features"] = df.apply(combine_features,axis=1)
      cv = CountVectorizer() #creating new CountVectorizer() object
      count_matrix = cv.fit_transform(df["combined_features"])
      cosine_sim = cosine_similarity(count_matrix)
      movie_index = get_index_from_title(movie_input)
      similar_movies = list(enumerate(cosine_sim[movie_index])) 
      sorted_similar_movies = sorted(similar_movies,key=lambda x:x[1],reverse=True)[1:]
  
      return sorted_similar_movies
  </code></pre>
  
  <p>The browser view:</p>
  
  <p><a href="https://i.stack.imgur.com/wZJjv.png" rel="nofollow noreferrer">browser view</a></p>
  
  <p>The browser view shows that the image is present but doesn't seems to view it.</p>
  
  <p>dataset view
  <a href="https://i.stack.imgur.com/yPvGV.png" rel="nofollow noreferrer"> movie dataset view</a></p>
  
  <p>folder view
  <a href="https://i.stack.imgur.com/xnNbF.png" rel="nofollow noreferrer">flask folder</a></p>
  
  <p>Please review my code and let me know the necessary changes.</p>