POST an image and display it in dashboard in Node-red

My goal is to send a picture via POST request in Python and to display it in a dashboard in Node Red, but I'm stuck in the step of reading the image once it's been sent.

This is the piece of code I'm using to send the file:

directory = os.path.join(DIRECTORY_IMAGES, id)
files = {'image': open(directory,'rb')}
requests.post('http://XXX.XXX.X.XX:1880/IMAGE', files = files)

Once in Node-red, the blocks I'm using are the following:

The message is received, but I'm unable to get the picture out of it. As I've read in other posts the msg.payload is set to req.files[0].buffer, encoded as Base64 and displayed using <img width="16" height="16" src="files:image;base64,{{msg.payload}}" /> in a template, but that does not display the image.

[{"id":"797939a8.a91a58","type":"http response","z":"ddfa6621.2e7168","name":"","statusCode":"","headers":{},"x":1290,"y":2280,"wires":[]},{"id":"d5b145ce.a712f8","type":"ui_template","z":"ddfa6621.2e7168","group":"9beeae56.34305","name":"Display image","order":4,"width":"7","height":"6","format":"<img width=\"16\" height=\"16\" src=\"files:image;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1680,"y":2220,"wires":[[]]},{"id":"5e30e496.958b9c","type":"change","z":"ddfa6621.2e7168","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1300,"y":2220,"wires":[["2f260e60.d12642"]]},{"id":"2f260e60.d12642","type":"base64","z":"ddfa6621.2e7168","name":"Encode","x":1500,"y":2220,"wires":[["d5b145ce.a712f8"]]},{"id":"18c71628.986f4a","type":"http in","z":"ddfa6621.2e7168","name":"","url":"IMAGE","method":"post","upload":true,"swaggerDoc":"","x":1050,"y":2220,"wires":[["5e30e496.958b9c","797939a8.a91a58"]]},{"id":"9beeae56.34305","type":"ui_group","z":"","name":"Última pierna procesada","tab":"223d38a0.9cbaa8","order":8,"disp":true,"width":"7","collapse":false},{"id":"223d38a0.9cbaa8","type":"ui_tab","z":"","name":"CALIDAD PULPAS CINTA 0","icon":"dashboard","disabled":false,"hidden":false}]

What am I missing?

Solution

The img src tag should start with data:image/jpeg;base64, (assuming a JPEG image)

You should swap the image/jpeg for the mime type of the image, e.g. image/png

[{"id":"9dff2c2e.66ea1","type":"http response","z":"c09a8743.c89388","name":"","statusCode":"","headers":{},"x":390,"y":180,"wires":[]},{"id":"68e0a720.f29498","type":"ui_template","z":"c09a8743.c89388","group":"efcf5006.15dae","name":"Display image","order":4,"width":"7","height":"6","format":"<img width=\"16\" height=\"16\" src=\"data:image/jpeg;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":800,"y":120,"wires":[[]]},{"id":"2fb71bea.a5d1e4","type":"http in","z":"c09a8743.c89388","name":"","url":"IMAGE","method":"post","upload":true,"swaggerDoc":"","x":210,"y":120,"wires":[["9dff2c2e.66ea1","a87b8d6.a9b0c7"]]},{"id":"a87b8d6.a9b0c7","type":"change","z":"c09a8743.c89388","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":120,"wires":[["4bcddbb.38c2624"]]},{"id":"4bcddbb.38c2624","type":"base64","z":"c09a8743.c89388","name":"Encode","x":620,"y":120,"wires":[["7d7586e7.205398","68e0a720.f29498"]]},{"id":"7d7586e7.205398","type":"debug","z":"c09a8743.c89388","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":60,"wires":[]},{"id":"efcf5006.15dae","type":"ui_group","z":"","name":"Última pierna procesada","tab":"65324def.436554","order":8,"disp":true,"width":"7"},{"id":"65324def.436554","type":"ui_tab","z":"","name":"CALIDAD PULPAS CINTA 0","icon":"dashboard"}]

triggered with the following python:

import requests

files = {'image': open('/Users/hardillb/temp/photos/DSC_7188.JPG', 'rb')}
requests.post('http://localhost:1880/IMAGE', files = files)