0

I'm storing data in the local MongoDB server and fetching it from my Flask app, (everything is working till now), now when I'm trying to show the 'image' in <img src="">, the image is not showing, and no error. Below are some required code snippets that would be helpful:

The way I'm saving data to MongoDB:

encoded_string = base64.b64encode(image)
data = {
    "img": encoded_string,
    "name":name
}

result = collection.insert_one(data)

This is one document saved in my MongoDB collection as an example to show you:

_id:6120d2bdb42de480cbf1b5cc
img:Binary('czdPenM3T3pzN096czdPenM3T3pzN096czdPenM3T3pzN096czdPenM3T3pzN096czdPenM3T3pzN096czdPenM3T3pzN096czdP...', 0)
name:"HRL7C1OLL"

Fetching all the data in my collection in the Flask app:

@app.route('/', methods=["GET"])
def get_mongo_stream():
    if request.method == "GET":
        data = [x for x in mongo.db.plates.find({})]
        print(data[0]['img'])
        return render_template('index.html', data=data)

Output of img:

b's7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozr6NoHBtkoK6zs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Oys7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OpbyQia6Wzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Oys7Ozs7OysrOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs3sxL3ews7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsrKzs7Ozs7OuoZqbnJydnZ2dnZ2dnZ2cnJycnJycnJycnJycnJycm5ubm5ubm5ubm5ubmpqampqampqampqampubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubnJycm5ubnJycnJubm5ubm5ubm5uampqampqampqampqampqampqampqampqampqampqampqampubm5qampmZmZmampqampqampqampqampqampqam5ubm5ubmpqampqbm5ubm5qampqbm5qampqampqampqampqbm5ubm5ubm5ubm5ubmpqampqampubm5udmZRsNjRokZmdnJubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ycnJycm5ycnJycnJycm5ubm5ubnJucnJycm5ubm5ycnJycnJ2dnZ2dnZ2dnZ2enZ6enp6enp2dnZ2cnJycnZ2dnZ2dnZ2dnJycnJycm5ubnJydnZ6dnZ2dnJydnZ2dnZ2dnZ2dnZ2cnJycnJycnJycnJucnJ2dnp6dnZ2enp2dnJ2dnZ2cm5ubm5ydnp6enp2dnJybm5ubm5ubm5qZmp2dnJuamZiYmJmZmZmYl5eZmZmYmJeXl5eXmJiXlpWWmJufpKeoqKempaWkpaWmp6Wkpaeqq6qopqWmpqempqampaOnsLOzs7Ozs7OzoXdeY2ZnaGhpaWlpaGdmZmZmZmZmZmZmZmVlZWVlZGNjY2NiYmJiYmFhYF9fX19eXV1dXl5eX19gYGBgYGFhYWFgYGBgYF9fX2BgX2BgYWJiYmJjY2NkZGRkZGNjY2RmZmVjY2JhYWFhYWFgX19eX19eXl1dXV1dXV5eX19gX19fXl5eXl1dXV5eXl5eX2BgYWBfXl1dXV1dXl5eXl5eXl5eXl5fX19fX19fX2BfYGBgYF9eXl9fYGBhYWBgX19fX19fX19fYGBgYGBgYGBgYGFhYWFhYmJhYWFhYWBgYGBhYWBgYGBgYWBeSzIyS15gYmJhYWFgYGFiYmFiYmNjYmJiYmJiYmJhYGFhYWBgYGJjY2RkZGRkZWVlZWVkZWRkZGRkZGRkZGRkY2NjY2NkZmdnZ2dnaGhoaGlpaWppampqampra2tpaWdnZmZnZ2hoaWlpaGhnZ2dnZmVlZGRkZGVnaWpra2loZ2ZlZmdoaGhpampqaWlnZWRkZGRmZmZkY2JjZWdoaWpqamlpamtqZ2hpampoZmNiY2VnaWtqa2tqaGVjYWBgYGBhYGBeW19maWZjYFxaWFhaW1tZVlNUWFpZV1VUUlNUVVdXVlNPUldlcoGJkI+MioeEgoKFiomEgoKKlJiUjYaDhomJiIaGh4N8i6ezs7Ozs7Ozs5pdOUBFRkdISUlJSEdGRUVFRkZGRkZFRUREQ0REQ0JBQUFAQD9APz8+PTw8Ozs6OTg4ODk6Ojs7PD09PT0+Pj4+PT09PTw8PDw8PDw8PD0+Pz8/QEBBQUFCQkJCQUBCQ0RCQT8+Pj0+Pj49PDs7Ozs6Ojk5OTk5OTk6Ojs8PDw7Ojk5OTk4ODg4OTk5OTo7PT49PDo5OTk5OTk6Ojo7Ozo6Ojo6Ozs7Ozs7Ozw8PDw9PTw8Ozs8PT0+Pj4+PTw8PDs7Ozw8PDw9PT09PT08PT4+Pj4+Pj8/Pj4+Pj49PDw9PT09PT09PT09Pjw4OD1APz8/Pz8+PT4+Pz8/Pz9AQEBAQEA/QEBAPz8+Pj8+PT4/QEFCQkJDQ0RERENDQ0NDQ0JCQkNDQ0NDQ0NCQkJCQ0ZHR0dHR0hISElKSkpKSkpKS0tMTUxLSklHRkVFRkZISElJSUhHR0ZGRURDQkJBQUFDRUdJSklIR0VERERGRklKS0tLSklHRkVEQ0NDREZGRENDREZJSkxMTExLS0xNTEtLTU5NS0dEQ0NFRkZEQUFDQkA9Ojk4ODk7PDw8Ojg5PT07ODUxLy4wMzY2NTIuLzI1Njc4ODg5Oj1AQUE/PD9HVWJyfISHioqHgnx3dHd1b2ppcX+FgXdsZ2ttbGtoZ2plWnKgs7Ozs7Ozs7ObY0BITE1OTk9PT01MS0xMTUxMTExMTExMS0tKSklJSEdHR0dHR0dGRURDQ0NDQkBAP0BAQUJDQ0RERUVFRUZGRkZFRUREQ0RDQ0NDRERERUVFRUZHR0hISElJSUhISEpKSUhGRkVFRURFRERDQ0JDQ0JCQUFBQUFBQkJDREVEQkFBQUFAQEBAQEBBQUFBQkRGRkVEQ0NCQkNDQ0NDRERDQ0NDQ0NDQ0NDQ0NERENEREVFRURFRUZGR0dHRkZFRENCQkNDQ0NERUVFRUVFREVGRkZGRkZGRkZGRkZFRUVEREVFRUZGRkZFRUVFRERGR0dHR0dGRkZGRkdHSEhISUhHR0dHR0hISEhHR0dHRkZHR0hISUpLS0tLS0tLS0tLS0tLS0tLS0tLTExLS0tKSktNT05OTk5OT1BQUFFRUVFRUFFSU1RTUlFQTUxMTE1OT05OT09PTk5NTUxLSklISEdHR0lLTE1NTEtKSUpKS0xPUlRTUVBOTUxLS0tLS0xMTk5PT1BRVFRWVlVUVFRUVVZXWVpaWFZTUVBPT0tHPzk3Ozw7OTg4OTo8P0FCQ0REPzcyMjEwMC8xNDg9P0A/Pjw5PEJJTlNVV1hbXWFkZmZpbnR4foSNlZ+mpp+Shnx6dXFrZmp2fHtyZ2FiY2JfXFxgXFFsnrOzs7Ozs7OznGVDS09PUFBQUFBPTk1OT1BQUFBQUE9PT05OTU1MTEtKSkpKSkpKSUhIR0dHRkVEQ0NDREVFRkdHSElJSUlJSkpKSUlIR0dHR0ZGR0dHR0dHR0hJSkpLS0tMTExMS0xNTUtKSUhISEhISEdHR0ZGR0dHRkZGRkZGRkZHR0hIR0ZFRUVEREREREREREVFRUZJSkpJSUhISEhISEhISEhJSEhISEdHR0dIR0hIR0dHR0lJSkpKSktLTExLS0xLS0pIR0dISEhISElJSUlJSkpJSkpKS0tLS0pLSkpKSklJSUhJSUpLS0tLSklJS0xMS0tLS0tKSkpKS0tLTExMTE1MS0pLS0tMTE1NTExMTExMTExMTU1OT09QUFBQUE9PT09PT09QUFBQUFBQUFBQUE9QUVJSUVJRUVJSU1NSU1NUU1JSVFVVVVRTUVBPT1BRUlJQUFFRUVFRUlJRUE9OTU1NTU1OT09QUFBQUFBRUVFRVFhZWFZUUlJRUlJSUVFQUE9OTU5PUFFRUVFQUFBQUE9PUFFSU1NRUVBRUVFMSD85Njg5Ojs7Pj9CREZHSElKS0Y9OTw+P0FDRklQVVpcXl5dW19mcHV7fH59gIKHio+Rk5OTk5WWnqi3wcO9rp6PiX50ZFlYYmxwbWReXl5dW1lYWlVLaZ2zs7Ozs7Ozs5xkQ0tPT09PT05OTk1NTU5PT09PT09PT05OTU1MTEtKSUpKSUlJSUlISEhHR0dFRENDRERFRUZGR0hJSkpKSktLSklJSEhHR0dHR0dHR0dGRkdHSEhJSktLS0tLS0tLTExLSUhISEhHR0dHR0dGRkdHR0ZGRkdHR0dHR0dHSEdGRUVEREREREREREVFRUVHSUtKSkpJSUhISEhISEhISEhHSEhISEhISEhISEhISEhISUpLS0tMTExMTExMTExLSUhISElJSElJSUlJSktLSkpKSkpLTExLSkpLSkpJSUlJSUpLTExMTEtKSkpLS0tLS0pKSkpKSkpLS0xMTExMTEpKSktMTExOTk5OTk5OTk5NTU5OT09PUFFRUVFRUFBQUFBQUFFRUVFRUVFRUVFQUFFQUFBQUFBRUVFRUVJSUlFQUFFSU1NSUU9OTU1PUFFRUE9QUFBRUlNUVFRTU1JSUlNTUlJRUVJTVVZWVlZWVlhbXFpYVlVVVldXVlVTUlFMRkJDRERERENDQkJCQUFCPzs7PT9BQkRFSEpLSkhGQz88PD5CRUhKTE1NTU1LSkpLTVBTV1peYGRobnN5fX9/goaMkZaZm5uZl5eZnaGmqaijoqSnqK+3w83Ry7+xo56LdVpJRlFfaWtlYWFiYmJiYFxWTmues7Ozs7Ozs7ObY0JKTk9PTk1MTExMTExNTk5OTk5OTk5NTUxMS0tKSUhISElJSUhISEhISEdHRkVEREVFRkZHR0hJSkpKSktLS0tKSklJSEhHR0dHR0dHRkZGR0hISUlKSkpKSkpKSktKSUhHRkdHR0dHR0dHRkZFRUZGRkZHSEhHR0dHRkdHR0ZGRUZFRURERUVGRUZGR0lLSkpKSkpJSEhISEhISEhJSUlISUhISEhISEhISEhISUpLTE1NTk5OTU1MTExNTEpJSUlJSUlKSkpKSktMTEtKSkpLS0xMS0tLS0pJSUlJSUpLTU5OTk5MS0tKS0xNTEpJSUlJSUlJSktLS0xMTEtLS0tMTE1NTk9PT1BPUFBQT05OT09PUFFSUlJSUVFQUVFSUVFSUlJSUlJSUlJSUlJRUVFRUVFRUVFRUVFSUlJRUFBRUlJSUlFPTk5PT1FTUVBPUFBQUFFSUlNTUlFRUFFTU1JQT09QUlVXV1dXVlVWV1hWVFNSUlJUU1JPTUlIQz88PTw7OTg3NzY2NjY0NDEvLzE1Njk7PT9DRkxQV1xaUk9SVlhbXFxcW1taWVlYXmZvc3l+g4WIipCUmp6ioqarsbO1tre2tbS1t7q8v8C+ubrAxcTGyM/X29rSx7y4n4FdRTtFVWNqZmJiYWFiY2FeWVNwn7Ozs7Ozs7Ozm2NBSU5OTk1MS0tLS0tMTU1NTU1NTU1NTExMS0tKSUhHR0hISEhISEhISEhIR0dGRUVGRkdHSEhJSkpKSktLTExLS0pJSUlJSEhISEhIR0dGRkdHSElJSUlJSUlJSUlKSUhHRkZGRkZGR0dHR0ZFRERFRUVGR0hISEdHRkZGRkdHR0ZGRkZFRUZGRkZGR0hJSkpKSkpKSUhISEhISEhJSkpKSUlJSUlJSUlISEhHSUpLTE1OT09PT05NTE1NTk1LSkpKSkpKS0tMS0tMTExLS0pKS0tLS0tLS0tLSklJSUpLTU5PT09PTUxLS0xNTUxKSEhISEhISElKSktLS0tMS0xMTE1NTk5PUFFRUVFRUVBPUFBQUFFRUlJTUlJRUVJRUlJSUlJTU1NSUlJSUlNTUlNTUlNTUlNSU1NTU1NTUlFSU1NTU1NTUVFRUVFTVFNRUFBQT09PT09PTk1MS0tMT09OTEtKS01RU1RUU1JRUE9PTkxLS0tLSklHREA8ODk9Pz48Ojc1MjIyMjEwLissMDQ1Njg5Ozs7P0RPWmp2d21oamxsbGtpaGdnaGlra3J8hYmQlZqcnp+ipauusbK0t7m5u7y9vsHEyczOzszJyMjO2N7d2NTT2d7i3tbMx6+Ta04+RVNjamVhX11dXFxdXl1Yc6Czs7Ozs7Ozs5tiQUlOTk5NTEtLS0tMTU1NTU1NTU1MTEtLSkpJSUhHRkdHSEhISEhISEhJSEhHR0dHR0dISElJSkpKSkpLTExMTEtLSklJSUlJSEhJSUhIR0dISElJSklJSUlJSUlJSUhHRkZGRkZGRkdHR0dHRkVFRUZGR0hISEhIR0dGRkdISUhISEhHR0dHSEhISElJSUpKSkpKSkpJSEhISEhISUpLS0pKSUlJSUlJSUlISElKTE1OT1BQUE9OTU1NTU5NTEtLS0tLS0tMTExMTExMTExLS0xMTExMTExMTExLSkpLTU5QUVFSUU9NTExNTU5NSkhJSUhISElJSkpLTEtMTE1OTk5OTk5PT1BRUVFRUlFQT1BRUFFRUlJTU1JSUlJTUlJSU1NUVFRUVFRUVFRUVFRUVFRUVVRVVVRUVVRUVFVVVVVVVVVVVFNUVFRUVFRTUU9PTk1MS0pJSEZFRURDQ0VFQ0FBQEFDRkhJSUhHRkRDQkJBQUFBQEA/Pz07OTc6P0NCQUFBQkVJT1RYWVlYV1hXVVJRTk1KR0hLWGd9jpOHgYKCgH99fHx9f4OHi46TmJ+jqa2xsrOys7W4u729vLu6ube2tre6vsHCv7qyq6issrq8ubWwtL/N19vX0My3n3ZTPUFOX2diX15dXV1cXFxcWHSgs7Ozs7Ozs7ObYkFKTk5OTUxMTExMTU1NTExMTExMS0tLSkpJSUhHRkVGRkdHSEhISUlJSUlJSEhISEhISElJSkpKSktLS0xNTUxMS0tKSkpKSkpKSkpJSUhISElKSktLSkpJSkpKSklIR0ZGRkZGRkdHSEhIR0dGR0dHSEhJSUlJSUhISEdISUpJSUlISEdHSEhJSUlKSkpKSkpLS0tKSklJSUlISElLS0tLSkpKSkpJSUlJSUlJSkxNTlBRUVBPTk1NTU1NTUxMTExMTExLTExMTExMTExNTU1NTU1NTU1MTExMS0tLS01PUVJTVFJQTk1MTE1PTktJSUpJSUlJSkpLTE1NTU5PUE9PT05PT05PT1BQUVFRUFBQUFFSUlNTVFRTU1NTU1NTU1NUVFRUVFRVVVVVVVVVVVZWVlZWVlZWVlZVVlVWV1dXVlZWVlVVVVVVVVRUUlBNTUxKSEdFREJAPz09PDs5ODg3Nzc4OTo8PDw8Ozs5ODg4OTk5OTk5Ojs9P0JDQ0FBREdLUVhkb36IlZqfoZuRhoF5c2xoYltYWGFtg5WbkoyMi4uJiImLkJSboKerraqssLW4uru6ubq7vL2+v7u2srGtqqako6ShnpaNf3ZxdXZ2cm1tcoSZs8PNy8fEsp12Ujo8SVpjX15fYWRkY19bV1Nxn7Ozs7Ozs7Ozm2NBSk9OTk5NTExNTU5NTExMTExLS0pKSUlISEdHRkVFRUZGR0hISUlJSUlJSUlJSEhISElJSkpKSkpLS0tLTU1NTExLSkpKSkpKSkpLSkpJSkpKS0tMTEtLSkpKSkpJSEhHRkZGRkdISElISEdISUlJSUlKSUlJSUpKSkpKSkpLSkpKSUlJSUlJSkpLS0tLTExMTExMTEtLS0tKSkpKS0tLS0pKSkpKSUlJSUlJSkpMTU9RUlJRUE9NTU1NTU1OTk1NTk1NTExMTExMTExNTU5OTk9PT05OTUxMTUxMTExNT1JUVVVTUU9OTU1OUE9MSktLS0tLS0tMTE1PT09QUlNSUVBPT05OTk5PT1BQUFBQUFFSUlNTVFRUVFNTU1NTU1NTVFRUVFVVVlZWVlVWVVRVVVRVVVVUVFRUVVVVVllaWFdWVVVUVVVWVVVTUk9LSUhHRkRDQT89Ozs6Ojo4NTIzNDQ0NTU2NjU1NTQzNDU2ODk7PDw9P0RKVF1obnJzdHV3eX+Fkp2tuMPIzc7IvrClloyBfnZwaWZrdIeXoZ+dnZycnZ+hpKmts7a7vr25ubu7u7e0rqqlpKCdmpiTjYiHg395d3Rzb2tiWk5GQURCPTc0OUNYbIOOm6Grs7ClglpAQkxbYVxcX2NmZ2NfW1dScJ+zs7Ozs7Ozs5tiQUpPT09OTU1NTU1PTkxLS0tLS0pKSUlISEdGRkVEREVFRkdHSElJSUlKSkpKSUlJSUlKSkpKSkpLS0tKS0xNTUxMS0tKSkpKSkpLS0tKSktLTExMTExMTEtLSkpJSUhIR0dGRkdHSElJSUhISUtMTEtLSkpKSkpKS0tMTExLS0tKSklJSUlJSkpLS0tMTE1NTU1NTk5NTU1MTEtLSkpLS0tLSkpKSkpJSUlJSUlKTE5QUVNSUlFPTUxNTU1NTk5OTU5OTk1NTU1NTExMTE5PT09PUFBPT05OTU1NTExMTU9TVVZWVFJPTk1NTlBQTkxMTExMTEtLTE1OUFBRUlRVVFNRT05OTk5OTk5PT1BQUFBRUlNTVFRUVFRTU1NTU1NTU1NUVFVVVVZWVlZWVlNSU1NSUlJSUlJSU1NTU1VZWlhWVFNSU1RVVVVTUVBMR0REQ0JBQD8+PTw7Ozw8Ozk4ODk5OTk4ODg3NjU0MzQ4PD5AQkRFSExWYHOClJ6tt7y5tbKwsLS5wcfLy8jGxce8q5eLgoB8eHJtb3aFkqCmqqqrrbCzt7m8vr6+vLq7v7++ubWropaNgn10bGNfWldUVFFNSkdFRURDQD04NDI0Mi0rKzM+S1JYV2FviqKysZNnSk1WYWNcWl1hZGJdW15dVnKfs7Ozs7Ozs7ObYkFJTk9PT05NTU1NTk1MS0tLS0tLSklJSEhISEhGRURFRUZGRkdISUlJSktLS0lJSUlKSkpKS0tLTExMS0xNTk5NTU1MTExMTExMTExMTExNTUxMTExMTExMTEtLS0pJSUhISEhISElJSUlJSElMTU1MS0tLS0tLS0xMTE1NTEtLS0tLS0tLS0tMTExMTU1OTk1NTU5OTk1OTU1MTExMTExMTExLS0tKSkpKSkpLTE5PUFFSUlFRT05NTk5NTk9QT09PT09OTk1NTUxMS01OT09PUFBQUFBPT05OTk5OTk9QUlNVVFRUUlFQTk5PTk1MTE1OT1FTVFRTUlJRUlJVVVRSUVFQT09OTk5PUFJSUVFSU1NUVVVVVVVVVVRUVVZXV1dWVlZWVldXWFdXV1ZTUVFQUFBQT1BPT05NS0pMTlBPTk1MTExMS0pJR0ZGQ0A9PT08Ozo6Ozw9PkBAQUFBQ0hOUlVVVFJQUFNYX2RrcHV3en2AgYaKlJ6uvMvT4u3y7ubf1tHOzc7Pz8zJxcbMx7innpeXlpaSjo2QlpylrLCurq6wsbKxrqqknpiTlJucmJKMgnluZVpUS0Q+PDczMTIyMC0rKSosLzEzMjAyNjg2ODtDS09NSUJIVnKNqLWnhWddWmBgW1tfYmRgWlleXldyoLOzs7Ozs7Ozm2NBSU1NTk9PTk5NTU1MTExMTExMTEtKSUlKSktLSUVDREVFRUZHSElJSUpLTEtJSEhJSkpKS0xNTE1NTU1OTk9PTk5OT09OTk5OTk1NTU5OTk1MS0tKSktLTExNTU1LSkpKSklKSUlJSUlKSkpLTExMS0tLTExMS0xMS0tMS0tLTExNTU1NTU1MTE1OTk5MTU1NTExNTU1NTU1NTU1NTk5OTU1NTUxMTEtMTU5OT09PT1BQUFBQUFBPT09PT09QUVFRUVFQUE9OTk1MS0pMTlBQUFBRUVFRUVBQUFBPT1BQUFBQUVJTVVVVU1FNTEpKS0tMT1RZXF5dWlZUUlFRU1NSUVFSUlJSUE9PUFNWV1RTVFVWV1dXV1dXV1dWVVhcX19dXFlZV1dYWVpaWVhVU1JRUE9PT05OTUxJRkNAPj4/QEJERUVEQj46NzY3OTk3Nzg3NjQzNDY6PUFDREJDRU5YZ3B4eXdxb296iZ2sub3CxcjLzs/S1tzh5unt8PX4+Pfw5tvVzsvJysrKysrKy8jCvLi2t7i5ube0srCwr66rqKSinpuWkYZ+cmphXV1jZGBaVlJQTEhEPzw8PUE+NjM1NjY0MS8wNDg9Pz88QElRUldcYGFiYV9cX2NygJmus6WGalZYWltfY2VlYl5bXVtUcaCzs7Ozs7Ozs5tjQUhMTU5PT09OTk1MTExMTU5OTk5NTEtKS0tMTUtGREVFRUZGR0hJSUpLTE1MSUhJSkpLS0xNTk1OTk9OT09PT09PUFBQUFBQT09OTU5PUE9OTUtKSkpKS0xNTk5OTEtMS0tKSkpKSUlJSkpKS0tMTExMTU1NTUxMTEtLS0tLS0tNTk9OTk9OTU1OT1BPTUxMTU1NTE1NTk1NTk5OTk5OTk5OTU1MTEtLTE1OT1BQUFBQUE9PT1BQUFBQUFBQUVFSUlFRUFBPT09OTk1NTU5PT09PUFBQUVBQUFBPTlFXWVdUUE9PUFJTVFNRTkxMTk5NT1FXXGFjYV1ZVlJSUFJRT09QUlNUVFJQUFFTVldWVVVWVlZWV1dXV1dYWFdZWl5hZGVkYl1ZVlVUU1JRT01LSkpKSEhISEdGQ0A9Ojg4OTs+QEFBPjo1MC4vMjU5Oj5BRUdKTFFVXWRtcnd3en2HkJ+osLGvqqiptMLX5fH0+Pn9/v/////////+/f38+PPz7eXd19LQzMvJyMjIw724ube1tLOzs7KwrKafm5SOiIR+eXNvZ2FXTkQ+OTg1NjQxLy4xNTg5ODY3Oj9ESEhLTlJSU1JTVl5lbXFzcHV8hIaMkJKOiYeDgHp1dHeKo7Oyl3BVVFZcYmVmZWFeXFxZU3Cfs7Ozs7Ozs7ObY0JJTU1OT09PT05NTExMTU5PT09PT05MTExMTU5LR0VGRkdHSEhJSkpLTE1NTUtKSktLTExMTU1OTk9PT09PT09PUFBQUFBQUE9OTk5OT1BOTU1MS0pKS0tMTU1OTkxMTExLSkpKSkpKSkpKSktMTU1NTU1NTU1MTExLS0tLS0tLTU5OTk5OTk1NTk9PT05OTk5OTk5OT09PTk9OT05OTU5NTU1MS0pKSkpLTExNT09PT09PT09PT09PUFBQUFBQUFFQT09PT09QUFFRUVBOTE1NTk5OTk9PT09PTUxSXmNfWlVQTkxMTE1OUFBQUlRUUlJUV1teXl5bWFZUU1JRT05NT1FTVFVUUU9PT1BSVVdWVFNTU1RUVVZXWFlZV1NWX2htb2xlXVRPSkhHR0VCQUFBQUFAQD8/Pz4+PTw8Pj9AQUJCQD05NDEwMjc7QERLUV1lb3V9g4+aqbK8wMbJztHW293e3dvb297j6+/09/r7/f7///////////7++uzh4t/c2djY19XTz8nFw7iroqGcmJKOioeDf3hybGhiXlhVT0tGREA8ODYzMjQ3MywnJigqMTc8Pz88PD5BQk9fbG5zdnp8goeSnKessLCxs7W2uby6trCro5qMgnl3hJilpY5sVFVXXGFjY2JgXVtcWlRwn7Ozs7Ozs7OznGRCSk5PT09PT09OTUxMTU1OT1BRUVBQTk1NTU5OTEpISElJSkpLS0xNTk5PT09NTExMTU1NTU1OTk9PUFBQUE9PUFBQUFBQUFBPT05OT1BQT05OTUxMTExMTU1OTk5NTU1MTEtLSkpKSkpKSkpLTE1NTU1NTU1NTUxLS0tKSkpLS0xNTk5OTk5NTU1OTk9QUFBQUFBQUFBQUFBQUFBQT05OTk5MS0pLSkpLS0tLTE5OTk5OTk5OTk5OT09QT1BSUlJRUE9PT09PT1FSU1NSUE1OTk9PT09QUFBQUE9OU11hX1pXUk9MS0tMT1FUVldYV1VUVVZZWltbWVdWVVVVVVRSUE9QUlRVVVNSUVBQUlVWU1BPTU1NTU5PT1BQUUxFSFFcYmViW1NJRD8+PT49Ojk6PDw8PDs7Ozw/QURGSk5QUE5NTEpIR0lLVF1ob3mAipCbpK60u8DK0t/n8PP19vb29vb29/f39/f3+Pj3+fv8+/r49fPv7+7t7ezr6+LWysa+t7Gura2sqqainJqOgHV1cWxmYl5aVVJNSUZEQDw5NjIwLi4tLCwtMDM4PDw5ODk/RVFaZGhqaWpsbm99j52fo6errbO5w8zW2t7e3t3d3d3e29jSzcG1oJB+dXqMmp2KbFdXWFxgYWJhXlxbXFlUcJ+zs7Ozs7Ozs5xlREtPT09PT09OTk5NTU1NTk9QUVFRUVBPTk5PT05MS0tLS0xMTU1OT1BQUVJRT05PT05OTk5OT09QUFFRUVFQUVFRUVFRUVBQUFBPT09RUlFQTk1NTE1NTU1OTk9PT05OTUxLS0tLS0tKSkpKS0xNTU1NTU1NTU1MS0tKSkpKS0tNTk5OTk5NTU1NTU1PUVJRUVFRUVFRUVFRUFFSUlFQUE9PTk1MTExMS0xMTE1OTk5NTk5NTU1OTk5PT09RVFZVU1JRUE9OTk9QUFFSUlJQUVFSUlJSU1NTU1NTU1RUVVVVVVNSUU9PUFJVWFpaV1RTU1NUV1haWlhWVVVUV11eWlVSUFFTVFVVVlZXWFdWU1FNS0hHRkZGRUREQ0I+ODk/RkpLSUVAPTs6Ojs6OTc3OTs8PTw7Ozw+QkZMT1dfYl5bWFZWWVxmcIOUqbXDzdba3uHk5ufo6uzw9Pf4+Pj5+fj3+Pn6+vr6+vr6+vn5+Pbx7OHYz8zKycnIxsPCw7qum4x6cmloZ2hoZ2ZlXlRNTUxKSEZEQ0JCQUFAQT47ODc3Nzc3ODg5Ojw/QkVNV15fZ3B/ipeeo6Snqa2vtrzCxMfJycnLztTZ3uHi4OHk5eTj4uDf3NjNwKmXf3FzhZWbi25ZWVlcXmBhYF5dXFxZU2+fs7Ozs7Ozs7OcZUVMUFBQT09PT05OTk5NTU5QUVJSUlJRUE9PT09PT05OTk5OT09QUVFSU1NUU1JRUVBQT05OT09QUFFRUlJRUVFRUVFRUVFRUFBQUE9PUVJSUVBOTk5OTk5OTk9PUFBPT05NTExMTExLS0pKSktMTk1NTU1NTU1NTUxMS0tKSktMTU5PTk5NTU1NTU1NT1JTU1JSUlJSUVFRUVFSUlJSUVFQUE9OTU1NTU1NTU1NTk5OTU1NTk5NTk5PT1BQU1ZYVlRTUVBPTk5OT09QUVJTUlJSU1NTU1RUVFVVVldTTk1PU1VWV1VTUlJSVFVXVlFPT09QUlRXV1hXV1ZWVlhcXFlVU1FSVFRUVFRTU1NQTElISEdGRUVFRUNBQD07OTg4OTo7OTc1NDU4PD9CQkVHTE9UV1pcX2BlaXF4gYaOlpmVkI6MjZGVn6q8zN3m8Pr8/f39/f39/Pz8+/v7/Pv6+vn39fPz8vDu7Onn5OPg3dnY0cm9tK2rqaqpp6SgpbGsm4FtVUc6NzU3OTo7Ojg0MjM0NTY3OTs+QERHSktQVVpbXmFlaGprbGxucHN0fYmSk5qjsLrGzNHS1dfb3uDe3+Hi4uDd29vd3+Dg3tzc3+Dg3dzc3t3c1Mm0ood1cYGSnI9yXFpZWl1gYF9fXl1cWFJwn7Ozs7Ozs7OznGZGTVFRUVBQUE9PTk9OTExOUFFSUlJSUVBPT05OT1BRUVFRUVFRUlJTVFRVVVVTUlJRUE9PT09PUFBRUVJSUVFRUVFSUlJSUVFQUFBPUFFSUlJQT09OT09PT09PUFFRUFBPTk1NTE1MTEtLS0tMTU5OTk5OTk5OTU1MTExMS0tLTE1OT09OTk5NTU5OTlBSU1NSUVFRUVBQUFFRUlJSUVFQUE9PTk5PT09OTk5OTk9PTk1NTk5OTk9PUFBRUFJWV1ZUU1FQT09PT09QUFFRUVFRUVFRUlJSUlNUVVVWU05MT1RXWVlYVVJRT05NTUxKSUpLTVBSVVdYWVlYWFlXU1FRUVJTVlZWVFFNSkZEQD09P0JER0lLTEtKR0VBPz9ERUM+OjUxLzA1O0NJTU5WYWtvdXyEiZCVnqWwucTK0NTV1NLQ0M/Q0dXY3uLo6vH6/f39/f39/f39/f39/f38+vj38e3o5uDc1MzDvbazrqmmpaOgnZybnZ6foJ6blp2qqZl/bFRGOTQxMTExMC8vMDIzNjg8PkJFSk5UWV1dan2LjJKYn6Soqaqqqqyur7K0tre7wMjP1dja2tvc3uLj4eLj5OLg3NnY2NjX1tPR0M/Q0M/Nz9LV1tLKuquRfXeDlKCUdl9aWVtcX2BgYGFfXVhScJ+zs7Ozs7Ozs51nR05RUVFQUFBQT09PTk1MTlBSU1RUU1JRUFBPT1BSVFNTU1NTU1RUVFVWVldWVFNTUlFQT09PT1BQUVFSUlFRUVFSUlJSUlJSUVBQUFBRUlJSUVBQT09PT09PT1BQUVFRUE9OTk1NTUxMTEtLTE1PTk5OTk5PT05OTU5NTUxNTU1OT1BQT09OTU1OTk5QUVJSUVBQUE9PTk9QUFFRUE9PTk5NTU1OT09PT09OTk5QUE9PT1BQUVBRUVJSUlJTVFRTUlJRUFBPT1BQUFFRUVFSUlJSUlNTU1NUVFVWVlRRUVNWWVtbWldUUk9NS0pJR0dISUpMTE1OTk5NTEtLSkdGSEpLTU5OTUpHREE+PDk3ODs+QENGSEhJSUpLTEtRW2NkZWZnZmhrcXd+hIiIkZ6oqrC2vsPKz9fc5ezx8vT19vX09PT09PT08/Pz8/P19/j39vTx8e/u7ezq6Obl4+Le2tTRy8jDvbOroJqTkY2LioqMjpKUmJqdnZualpKYpqWXgXBcUUZDQkRHSkxNUlhdXmFlaWxwdHh8g4iMjZqruLrBxs3Q09XV1dXW2Nna2NbW1tja3N3d29rY2drd3dva3Nzb2dbU09LS0c/NzMjFxMbFxMbKz9DOyr+zm4R5gI6flXhfWVZaXWBhYGBhYF1YU3Cfs7Ozs7Ozs7OdaEhOUVFRUFFRUFBQUU9NTU9RUlRVVVRTUlFRUFBRU1VUVFRUVFRUVVVWV1dXVlRTUlFQT09PT09QUFFRUlJSUlJSUlJTU1JSUlJRUFBQUVJSUlFRUFBQUFBQUFBQUFFRUVBPT05OTU1NTU1NTU1NT09PT09PUFBPT05OTk1NTk5PT1BQUVBPTk5OTk5OUFBRUVBQT05NTU1OT09PUE9OTExLSkpLTE1NTk5OTUxNT1FRUFBQUVFRUVJSUlJSUlFQUVBQUFFRUVFSUlNSUlJUVFRUVVVUVFVWVldXV1ZXWFlZWlpaWlhXVVVTUlFQTkxLS0tJSEZDQT89Ojk3NTc9QkJDQ0NCQD49PDw8PT49PDs8PDs7Ozo6PEBHTVNWYm+AiZmms7nAw8fJzc/R0dXb4OHj5ejp6uzv8PP19fb29fT09PT19vj5+fn5+fr6+PTw7+vl3tvV0s3Jwr24tbS0s7Kvrq2sqKWfmZSRjo6QkpWWmp2ho6WmpaOgnpqXnKalmId5aWFbWl9lb3d/g4uUm5yfoqWnqqyvsra6v8HExcjKz9LU1dXV1dXW2Nrb3d/f3tzb2dnX1dLQzs7Q0tHMy83Ozs7NzM3Ozs/Pz87KxcPHyMXHy87Oy8e/t6CIeHiGmpN2XVZUWV5iY2FgYWBeWlRxoLOzs7Ozs7OznWlJT1JRUVFSUVFSUlJRT09RU1RWV17Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsrKzs7Ozs7Kzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Kzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7M='

The index.html (where the problem exists):

{% for item in data %}
        <div class="row">
          <div class="column">
            <img src="{{ {`data:image/png;base64,${item['img']}`} }}">
          </div>
          <div class="column">
            <h2>{{ item['name'] }}</h2>
          </div>
        </div>
        {% endfor %}

I can display the item['name'] so that means I'm iterating the data incorrectly way but I cannot display the `image. Can anyone help me out with what I'm doing wrong?

EDIT: Edited the code with some changes I did but now I'm getting an error: jinja2.exceptions.templatesyntaxerror: unexpected char '' at 760`

3
  • 1
    I think ' is causing the issue. Commented Aug 23, 2021 at 7:00
  • @KapilSharma nope, didn't work. Commented Aug 23, 2021 at 7:03
  • I have tested with hard-coded src data and it's working. Commented Aug 23, 2021 at 7:10

1 Answer 1

1

I think best way for finding problem is copy and paste your base 64 to https://jaredwinick.github.io/base64-image-viewer/ and see if it displays your image or not

compare your results with src="your final generated base64" with generated base64 image from above website

Sign up to request clarification or add additional context in comments.

2 Comments

Hi, I tried, So I tried to print the encoded image string like print(data[0]['img']) and below is the encoded string image in the question (I couldn't show the whole encoded string as SO limits it to 30000 chars). But the image is still not visible if I feed it as an input to base64-image-viewer. Is there anything I could do, like change the way of storing the image in mongodb?
So I tried like this: <img src="{{ {data:image/jpeg;base64,${item['number_plate_img']}} }}"> but now I'm getting an error: jinja2.exceptions.TemplateSyntaxError: unexpected char '' at 760`. What does that mean?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.