Defect base64 string


I convert images in base64 via bash. The target is to send this base64 string to node-red via http... and display the image on the dashboard.

I send the content of TEST1 with:
curl --data-binary "@TEST1"

The content of TEST1:

Importand part is the V+H

The code in the Template Node:
<img src="data:image/jpg;base64,{{payload.att1}}" width="500" height="600">

I took a look at the source code to see why the image isn't showing
The image data is placed with
data:image/jpg;base64,.....54B9V H1AAI....
instead of:
..... src="data:image/jpg;base64,.....54B9V+H1AAI...." .......

The flow:


What i do wrong?

I add now a "String" node and replace all " " with "+".

Works but i guess this is a "stupid solution"

Try it like:


See the documentation tab for the template node:

By default, mustache will escape any non-alphanumeric or HTML entities in the values it substitutes. To prevent this, use {{{triple}}} braces.



This was my first try:
<img src="data:image/jpg;base64,{{{payload.att1}}}" width="450" height="450">

doesn't help. Base64 string is still defect

Tripple {{{}}}

With the string node (and OK):

I imported your flow and i notice that in the template node (the one that is wired to the ui_template node) .. you had it set as msg.payload instead of msg.template

Try making the change and see what you get ( with triple brackets )


.. also wire a complete msg Debug node after the template ( the orange one :wink: ) to double check if the base64 is rendered as expected and that its not something with the angularjs ng-bind-html

The same.

I guess the main issue is directly after the HTTP Post Node.

If i send with
curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -d "@test" the content from file "test"... is there any special format required.

Atm the content is:

I changed now the content to JSON

looks like this works

1 Like