How to display images from cv2 in browser using flask?

Question

I need to display 2 images, one is input and other is the opencv processed image. After searching online, I found this. So I run a simple flask prog --

from flask import Flask, make_response, render_template, Response
app = Flask(__name__)

@app.route('/')
def simple():
    import cv2
    img = cv2.imread('fruit.jpg')
    ret, jpeg = cv2.imencode('.jpg', img)
    response = make_response(jpeg.tobytes())
    response.headers['Content-Type'] = 'image/png'
    return response
if __name__ == "__main__":
    app.run()

This worked fine.

For displaying two images, I followed the link, that I posted above. That looks like --

from flask import Flask, make_response, render_template, Response
app = Flask(__name__)

@app.route('/gallery')
def get_gallery():
    import cv2
    im_names = []
    img = cv2.imread('fruit.jpg')
    im = cv2.imread('adapt.png')
    ret, jpeg = cv2.imencode('.jpg', img)
    ret1, jpeg1 = cv2.imencode('.png', im)
    print(im_names)
    im_names.append(jpeg.tobytes())
    im_names.append(jpeg1.tobytes())
    return render_template("gallery.html", image_names=im_names)

if __name__ == "__main__":
    app.run()

Where I have copied gallery.html from above link. I got no output. It says internal server error. How can I solve this problem?(I am new to flask).

Answer 1

First create a folder named "static". Put your images in that folder. And try this :

from flask import Flask, make_response, render_template, Response

app = Flask(__name__)
@app.route('/gallery')
def get_gallery():
    return "<img src='static/fruit.jpg'/> <img src='static/adapt.png'>"

if __name__ == "__main__":
    app.run()

Note that you could use your template gallery.html, and put the html code directly in the template.