Defect base64 string

Hello.

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" http://192.168.1.133:1880/nodeRed/LG200

The content of TEST1:
att1=/9j/4AAQSkZ................BQX54B9V+H1AAI8RyE0NiAoL88AX............

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:


Code:

What i do wrong?

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

Works but i guess this is a "stupid solution"

Try it like:

{{{payload.att1}}}

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.

2 Likes

Hello.

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 )

image

.. 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" http://192.168.1.30:1880/LG200 the content from file "test"... is there any special format required.

Atm the content is:
att1=/9j/4AAQSkZJRgABAQEA8ADwAAD//gBpRmlsZSBzb3VyY2U6IGh0dHA6Ly9jb21tb25zLndpa2ltZWRpYS...............

I changed now the content to JSON
{"att1":"/9j/4AAQSkZJRgABAQEA8ADwAAD//gBpRmlsZSBzb3VyY2U6IGh0dHA6Ly9jb21tb25zLndpa2ltZWRpYS..............."}

looks like this works

1 Like