# Convert string to image

**URL:** <https://discourse.nodered.org/t/convert-string-to-image/77061>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [29 March 2023 17:13 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061 "2023-03-29T17:13:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![LinkView\_Maze](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@LinkView\_Maze](https://discourse.nodered.org/u/LinkView_Maze)\
**Post date:** [29 March 2023 17:13 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061/1 "2023-03-29T17:13:40Z")

</div>

Hello

i am a object json with name : jpeg : [data]  
This object is encoded to base64 . I use node base64 but i don't have the good result.

for example the data in string receive with my API

```auto
/9j/4QDeRXhpZgAATU0AKgAAAAgACAEAAAQAAAABAAAFAAEBAAQAAAABAAAC0AEQAAIAAAAJAAAAbgEaAAUAAAABAAAAeAEbAAUAAAABAAAAgAEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAAiAAAAABCcm9hZGNvbQAAAAAASAAAAAEAAABIAAAAAQAGkAAABwAAAAQwMjIwkQEABwAAAAQBAgMAoAAABwAAAAQwMTAwoAEAAwAAAAEAAQAAoAIABAAAAAEAAAUAoAMABAAAAAEAAALQAAAAAP/bAIQABgQEBQQDBgUEBQYGBgcIDgkICAgIEQwNCg4UEhUVFBITExYZIBsWFx4YExMcJRweISIjJCMVGicqJyIpICMjIgEGBgYIBwgQCQkQIhcTFyIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi/8AAEQgC0AUAAwEiAAIRAQMRAf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCxAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6AQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgsRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWm...

```

but I don't know if the data is complete.

I want to decrypt the data to display it on my dashboard

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [29 March 2023 17:35 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061/2 "2023-03-29T17:35:06Z")

</div>

Hi @LinkView_Maze

The debug pane limits the number of characters, so when viewing it in the debug, it will be capped at `debugMaxLength` as set in the settings file of Node RED - but the object passing through the flow will be in its full glory.

I dont use Dashboard, but if you can use an image tag with the following

`msg.payload` being the base 64 string

```auto
<img src="data:image/jpeg;base64, {{msg.payload}}" />

```

---

<div class="post-metadata">

**Author:** ![LinkView\_Maze](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@LinkView\_Maze](https://discourse.nodered.org/u/LinkView_Maze)\
**Post date:** [29 March 2023 17:37 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061/3 "2023-03-29T17:37:23Z")

</div>

> [@marcus-j-davies](#):
>
> `img src="data:image/jpeg;base64, {{msg.payload}}"`

this code is use une node-function ?

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [29 March 2023 17:46 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061/4 "2023-03-29T17:46:58Z")

</div>

Try this.

1st

In a `template` node (directly after the node giving you the base 64 string) set the following:  
correcting the path where necessary 😅

`<img src="data:image/jpeg;base64,{{payload}}" />`

 ![Screenshot 2023-03-29 at 18.41.46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/867f2a5a417fba9f51ee9e0f64b9f6135a1156d5.png)

2nd  
Attach this `template` node to a `ui_template` node with the following content

`<div ng-bind-html="msg.payload"></div>`

Explanation:  
We are creating an image tag, with the source image in a `template` node  
we then set this as the content of a `div` tag via the `ui_template` node

I have not researched if there are ready built nodes for the dashboard to do this - so might be worth searching also.

---

<div class="post-metadata">

**Author:** ![LinkView\_Maze](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@LinkView\_Maze](https://discourse.nodered.org/u/LinkView_Maze)\
**Post date:** [30 March 2023 05:52 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061/5 "2023-03-30T05:52:24Z")

</div>

![flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/1685d07c267b698d718a03feef827434c6caf10c.jpeg)

```auto
[{"id":"438a61a2.f79ad","type":"ui_template","z":"6b8538b3.c82508","group":"b1ab9db7.da3","name":"image","order":4,"width":"4","height":"3","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1170,"y":40,"wires":[[]]},{"id":"3c8b5a2.12414a6","type":"template","z":"6b8538b3.c82508","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img src=\"data:image/jpeg;base64,{{payload.anpr.decision.jpeg}}\" />","output":"str","x":1040,"y":40,"wires":[["438a61a2.f79ad"]]},{"id":"b1ab9db7.da3","type":"ui_group","name":"Recherche Ouverture","tab":"6d23db44.1697d4","order":4,"disp":true,"width":"9","collapse":false,"className":""},{"id":"6d23db44.1697d4","type":"ui_tab","name":"Main Tab","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

Thank you for your help. I have a lag when too much json arrives, I think it's due to the file decryption time.  
Afterwards I have a lot of things at stake (LTE - a lot of vehicle traffic...)

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [30 March 2023 06:39 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061/6 "2023-03-30T06:39:39Z")

</div>

What you have should work.

No need for the base64 node - as web browsers support base64 encoded images, but not raw binary strings - which will be the result if using a base64 node.

As mentioned, there maybe dashboard UI nodes, that already support base64 images - I'm not sure, but this approach will work I believe

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [13 April 2023 06:39 UTC](https://discourse.nodered.org/t/convert-string-to-image/77061/7 "2023-04-13T06:39:54Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.