# Show images from a template

**URL:** <https://discourse.nodered.org/t/show-images-from-a-template/63493>\
**Category:** Dashboard\
**Created:** [5 June 2022 21:42 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493 "2022-06-05T21:42:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [5 June 2022 21:42 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/1 "2022-06-05T21:42:36Z")

</div>

im trying to display all images from a src but my template just display the last one, my template:

```auto
<img width="30" height="30" src= "{{msg.payload._value}}" alt='Image not found' />

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0db95640d50989be719e5d523df952fe0b11a8c8.png)

My debug show this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1e304fefe2e5d18f2c0866a2474455ca7014ed77.png)

Can someone help me ?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [6 June 2022 16:34 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/2 "2022-06-06T16:34:43Z")

</div>

> [@a45293](#):
>
> but my template just display the last one

Possibly you have the **"Reload last value on refresh"** checked in **ui\_template** node settings ?  
Uncheck it and try again .. you may need to restart Node-red server to clear any cached values.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/3019187112400e4718c0beab683fe89df2abc7fb.png)

**Test flow :**

```auto
[{"id":"2cdd0d87130cd5c5","type":"inject","z":"54efb553244c241f","name":"image1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"_value\":\"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\"}","payloadType":"json","x":370,"y":1180,"wires":[["3a1854cd2e61fb33"]]},{"id":"3a1854cd2e61fb33","type":"ui_template","z":"54efb553244c241f","group":"780cfd9c93f7b572","name":"","order":0,"width":"5","height":"5","format":"<style>\n .myImage {\n height: 100px;\n width: 100px;\n }\n</style>\n\n<img class=\"myImage\" src=\"{{msg.payload._value}}\" alt='Image not found' />","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":560,"y":1220,"wires":[[]]},{"id":"a7015d0ff437872d","type":"inject","z":"54efb553244c241f","name":"image2","props":[{"p":"payload._value","v":"data:image/gif;base64,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","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":370,"y":1260,"wires":[["3a1854cd2e61fb33"]]},{"id":"780cfd9c93f7b572","type":"ui_group","name":"Test","tab":"0baea998ce75eabd","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"0baea998ce75eabd","type":"ui_tab","name":"Test Group","icon":"","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [6 June 2022 19:27 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/3 "2022-06-06T19:27:32Z")

</div>

it did not work

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [6 June 2022 20:14 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/4 "2022-06-06T20:14:56Z")

</div>

well that's not very informative 😉

can you explain to us what doesnt work and export/share a demo flow explaining in some more detail the problem ? sometimes its little difficult to understand with just screenshots

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [6 June 2022 22:42 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/5 "2022-06-06T22:42:18Z")

</div>

I simply i need to upload several photos to my database and then I want to go get them and show them on the dashboard

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 June 2022 23:40 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/6 "2022-06-06T23:40:03Z")

</div>

I'm an guessing this is related to your other thread: [Node-red payload](https://discourse.nodered.org/t/node-red-payload/63482)

If so, then I recommend you filter out the entries that are not images then send the array of data to a template node & use angularjs ngRepeat directive to build html & IMG tags with the IMG SRC set to the `._value` field.

If you had stated your intention on the original thread you would have got this answer sooner.

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 00:12 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/7 "2022-06-07T00:12:03Z")

</div>

Ok, but my data comes from influxdb in the same \_value variable how I do that?

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 00:46 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/8 "2022-06-07T00:46:32Z")

</div>

why this is not correct ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/69cdd5466ef8ff02eec9e5f26a38904dce8cc522.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/344931dd7e0c49cc4bcd926a61e1311a00f0b149.png)

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 00:49 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/9 "2022-06-07T00:49:33Z")

</div>

this is the output of the function:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/59309e94098e9e1a53423670924b0d61033afcfe.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [7 June 2022 00:57 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/10 "2022-06-07T00:57:16Z")

</div>

Here is a demo flow of how you can filter your array into data that have a `_field` **description** and to **images**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/576e66305900c25155ed8526c26057c3856e1000.png)

```auto
[{"id":"3487880915b921a8","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":1620,"wires":[["319f290522a46ad1"]]},{"id":"319f290522a46ad1","type":"template","z":"54efb553244c241f","name":"db data","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"[\n {\n \"result\": \"last\",\n \"table\": 0,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:41:03.77Z\",\n \"_value\": \"1\",\n \"_field\": \"description\",\n \"_measurement\": \"info\"\n },\n {\n \"result\": \"last\",\n \"table\": 0,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:44:24.019Z\",\n \"_value\": \"hi\",\n \"_field\": \"description\",\n \"_measurement\": \"info\"\n },\n {\n \"result\": \"last\",\n \"table\": 1,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:41:03.77Z\",\n \"_value\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAAAXNSR0IArs4c6QAAIABJREFUeF58vYl2I0muLBgkJWVtd97M/3/f6+5bW+7aSIpzbAPgoaxWnSxlSmQwwhfAYDDADz//9P/dNn7dttvtbbsd8M/bdjhu2+GAP8ftcDhst9u2vfGVB37Hz4+323Z3O2/H29u2Hbd679vhxr/fDtt2e8M1D3wff7Adt8PtyH8f8DlvF70fn3rItQ966eG4+Vfbdrjp9fxs/NJ3fbhtbzfcOz4LN3jgvW1H3jyeit/zPHq+bbvddK3tjXfGZ8dz8wl9fVwH1z0cTtt2wzic+Od0vNNnbG/b2+1lu76dt7e3q9973I7H43Y6adzO54s/jw/Y97cdtuPhsF0vr/W5ul/88XBt23Z909icjrjecTtyPnBfeObrdrtdMCM1HppJzY/G33N10phojPSFT8J9Y478A74X184XPh/Pkc/Hd9x3xujt7cLXYw40rp6XzA/G+YBnxTNgTjzGGNfjYXu5nP2ew3Y8nrbT6cRnxOdeL2/bgWPma4770pLi7Pbv8byc79yE1i3X8A33cNzwH1Ze7vKIcfG6wmC9XTGmGg+tVvwef+n7WNYf52GMKdeFXstxydjmghrhmgGsK77+qPt42970DJxvXae+5114Jqw+XB/vwf1in92u23Z44zjjdjFPmG/dn57/hDWMFYO3bLftsl3q2Y5H/ObINcgR4ALKgvLeG/cjW4A5PXIuuX5xD7sv3AfXDF5/fas9nefSXuEHcj1e37BnYIP0eo0BxgdGRnuSfzjXV9kpLQfN2e02p0ujfTxub7g/vlDfcU3szzl/Ge/jqdc4bph2zPOc9Y/7O1/PnB/8nT8fCxKvv1y0/2v6uZQ0t/iDda49N/ewbBhHzDYjq7ZtgFbnBeNxwFxetzfYg8PbdjjettMdrrFtp5Pu63Q4bnfHE9czPv...\",\n \"_field\": \"image\",\n \"_measurement\": \"info\"\n },\n {\n \"result\": \"last\",\n \"table\": 1,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:44:24.019Z\",\n \"_value\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAAAXNSR0IArs4c6QAAIABJREFUeF6UvYtyG0myJZgASbXZ7O0qqa/N2v7/983s3K4qSSQBkGt+Hu4nAlDNrNqqJRJAIjPCH8ePP+L0//z+z8/P4zg+Pj+Pj+Pz+Dwdx/F0Pm719/l8fHx+HMfpdPCF9b/zx+l4+Twfp4+6wudxnD7qSvp3/Vw/8efPun697Tgdn7rO5+fHcTp9HqfT6TidzsdZ/9V34aaO0/Fxu+Gz9R++o/47n47T2beDNx51m/4Mr3fC9fD1f/Pn88Rr4q965NMZ/64n5XXzAn5+vlb3/PFxw3dxeXhfdanzmVfAax/Hcav7w6WesJbnp6d6jOM4XbVmtQcfR91PrQuv4gervz/xLKdPPxvX7IZd0/bgAc7rz/0cXM/6fP2N58QacUewz17f2jetd/3+VOtdD4b9Oem1kolP7E/9jv/hhvHe+p76XckGn/usv+cecEfnkrlPfzOeht9tkfNOeBN5/9ivU63X9fiE3GnFzhSMejY8WV2r1ozCyD3x/kKU6v1c+3qBMtlX85di+esa56PWrf57almmbJeclrRf61FbPuvZav24Lvxufmc9w+dxul2PM27xdNzq71qnusC55OQMOWlRwLPUq1zr8+nzeD7V+n8eT3juki48Ke4Te/Vxw8exfU8n6DYvL1ktmcPz96PiO5+fnvScet56gtvH8XGr/fw8np7Ox7lkTYoDnTuf8DvIivbo4+ODclDyca5rzn7Wul1vV+w314g6dNa165EgCyVD+rv2cOzBcXzoxkvfbCGwe5+lGR+9r72IkGXqJXTz9kHVqnUKG0MZLN2ttX3Gfn9+no7b7fOoZ4JMnWmfWk+hrp+xv7zXupbvH1sYi13qyP2pDTodn1hTPgvk8oP6dD4/H0/np+Pp9MS/z2f89/L8xPuR3T6eT8f55Ql7/Q...\",\n \"_field\": \"image\",\n \"_measurement\": \"info\"\n }\n]","output":"json","x":360,"y":1620,"wires":[["5104f607df7f69f1"]]},{"id":"71c8d592186e0111","type":"switch","z":"54efb553244c241f","name":"","property":"payload._field","propertyType":"msg","rules":[{"t":"eq","v":"image","vt":"str"},{"t":"eq","v":"description","vt":"str"}],"checkall":"true","repair":true,"outputs":2,"x":690,"y":1620,"wires":[["c0c7998aa6e82305"],["9b8a9ab432b8139e"]]},{"id":"7238847bd9f0e0c4","type":"debug","z":"54efb553244c241f","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1020,"y":1560,"wires":[]},{"id":"5104f607df7f69f1","type":"split","z":"54efb553244c241f","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":530,"y":1620,"wires":[["71c8d592186e0111"]]},{"id":"c0c7998aa6e82305","type":"join","z":"54efb553244c241f","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":870,"y":1560,"wires":[["7238847bd9f0e0c4"]]},{"id":"eb1f63617eb61be2","type":"debug","z":"54efb553244c241f","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1020,"y":1660,"wires":[]},{"id":"9b8a9ab432b8139e","type":"join","z":"54efb553244c241f","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":870,"y":1660,"wires":[["eb1f63617eb61be2"]]},{"id":"bcd4722ae550b040","type":"comment","z":"54efb553244c241f","name":"fliter data array","info":"","x":700,"y":1540,"wires":[]},{"id":"1d3eeaf7aaf5455c","type":"comment","z":"54efb553244c241f","name":"images","info":"","x":1010,"y":1500,"wires":[]},{"id":"fed09a2ded571e42","type":"comment","z":"54efb553244c241f","name":"descriptions","info":"","x":1030,"y":1720,"wires":[]}]

```

ps. i had to read a bit from your other Forum threads. It would be better if you continued the conversation in one place so people that already tried to help can do so.

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 01:02 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/11 "2022-06-07T01:02:36Z")

</div>

Ok, thank you but know i have a template and when i try display all \_values he just display the last one.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/362f2e602d37ad90bdbea78149e05c681a12223d.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/ab107eb6a2daf00ab92c623cc291f1d58d2aec3e.png)

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 01:17 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/12 "2022-06-07T01:17:06Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c0ccbdfddf789f84abb4dbe83471a3f3a338e593.jpeg)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [7 June 2022 01:51 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/13 "2022-06-07T01:51:16Z")

</div>

yes you mentioned that .. one step at a time 😉  
now that you have the data filtered you can try Steve's suggestion and use

> [@Steve-Mcl](#):
>
> angularjs ngRepeat directive to build html & IMG tags

The node-red Dashboard is based on the Angular front-end library and it has some useful [directives to loop through the data](https://www.w3schools.com/angular/ng_ng-repeat.asp).

For Example :

```auto
<div ng-repeat="x in msg.payload">
    <img class="myImage" src="{{x._value}}" alt='Image not found' />
</div>

```

**Modified Flow:**

```auto
[{"id":"3487880915b921a8","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":1620,"wires":[["319f290522a46ad1"]]},{"id":"319f290522a46ad1","type":"template","z":"54efb553244c241f","name":"db data","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"[\n {\n \"result\": \"last\",\n \"table\": 0,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:41:03.77Z\",\n \"_value\": \"1\",\n \"_field\": \"description\",\n \"_measurement\": \"info\"\n },\n {\n \"result\": \"last\",\n \"table\": 0,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:44:24.019Z\",\n \"_value\": \"hi\",\n \"_field\": \"description\",\n \"_measurement\": \"info\"\n },\n {\n \"result\": \"last\",\n \"table\": 1,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:41:03.77Z\",\n \"_value\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=\",\n \"_field\": \"image\",\n \"_measurement\": \"info\"\n },\n {\n \"result\": \"last\",\n \"table\": 1,\n \"_start\": \"2022-06-05T13:44:43.9949941Z\",\n \"_stop\": \"2022-06-05T14:44:43.9949941Z\",\n \"_time\": \"2022-06-05T14:44:24.019Z\",\n \"_value\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=\",\n \"_field\": \"image\",\n \"_measurement\": \"info\"\n }\n]","output":"json","x":360,"y":1620,"wires":[["5104f607df7f69f1"]]},{"id":"71c8d592186e0111","type":"switch","z":"54efb553244c241f","name":"","property":"payload._field","propertyType":"msg","rules":[{"t":"eq","v":"image","vt":"str"},{"t":"eq","v":"description","vt":"str"}],"checkall":"true","repair":true,"outputs":2,"x":690,"y":1620,"wires":[["c0c7998aa6e82305"],["9b8a9ab432b8139e"]]},{"id":"7238847bd9f0e0c4","type":"debug","z":"54efb553244c241f","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":960,"y":1540,"wires":[]},{"id":"5104f607df7f69f1","type":"split","z":"54efb553244c241f","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":530,"y":1620,"wires":[["71c8d592186e0111"]]},{"id":"c0c7998aa6e82305","type":"join","z":"54efb553244c241f","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":870,"y":1600,"wires":[["7238847bd9f0e0c4","5a467869265fcb5b"]]},{"id":"eb1f63617eb61be2","type":"debug","z":"54efb553244c241f","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":980,"y":1720,"wires":[]},{"id":"9b8a9ab432b8139e","type":"join","z":"54efb553244c241f","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":870,"y":1660,"wires":[["eb1f63617eb61be2"]]},{"id":"bcd4722ae550b040","type":"comment","z":"54efb553244c241f","name":"fliter array","info":"","x":700,"y":1560,"wires":[]},{"id":"5a467869265fcb5b","type":"ui_template","z":"54efb553244c241f","group":"780cfd9c93f7b572","name":"","order":0,"width":"5","height":"5","format":"<style>\n .myImage {\n height: 30px;\n width: 30px;\n padding: 10px;\n }\n</style>\n\n<!-- <img class=\"myImage\" ng-repeat=\"x in msg.payload\" ng-src=\"{{x._value}}\" alt='Image not found' /> -->\n\n\n<div ng-repeat=\"x in msg.payload\">\n <img class=\"myImage\" src=\"{{x._value}}\" alt='Image not found' />\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1060,"y":1600,"wires":[[]]},{"id":"780cfd9c93f7b572","type":"ui_group","name":"Test","tab":"0baea998ce75eabd","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"0baea998ce75eabd","type":"ui_tab","name":"Test Group","icon":"","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 02:38 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/14 "2022-06-07T02:38:32Z")

</div>

thank you, i put you template in my project and he display this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/300dfd28c68e61564ee803384ab2100b6d24bd22.png)

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 02:39 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/15 "2022-06-07T02:39:19Z")

</div>

and if i put join node nothing work

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 02:44 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/16 "2022-06-07T02:44:24Z")

</div>

I do it, thank you so much

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 03:07 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/17 "2022-06-07T03:07:26Z")

</div>

It's possible i put the description in the same template with the output:

````auto
image image image 
description description description
```
````

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [7 June 2022 11:09 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/18 "2022-06-07T11:09:34Z")

</div>

> It's possible i put the description in the same template with the output:

I was going to ask about that .. in order to do that, each element of the array of db data returned must have the `description` for each of the images in its object. So you have to review the way you return (or even save) your data from the db.

I was reading your two other Forum topics in order to understand more how your project works.  
Maybe filtering and seperating the data to objects that have a `_field` `description` or `image` is the wrong approach.

**When you save the data to the db, you send a msg with the image base64 value but do you send the `description` of the image along with it ?** ( Im asking because from the result of your db query it seems that image and description are on seperate rows - array elements )

---

<div class="post-metadata">

**Author:** ![a45293](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/a45293/32/62556_2.png) [@a45293](https://discourse.nodered.org/u/a45293)\
**Post date:** [7 June 2022 13:44 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/19 "2022-06-07T13:44:22Z")

</div>

This is my work:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e98cd88e247a60aad6a2efbf64aa83d48e76a1e.png)

I send my data like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/e/ee885413aa0b44c739bf7b9606459c194b98ee14.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [7 June 2022 14:44 UTC](https://discourse.nodered.org/t/show-images-from-a-template/63493/20 "2022-06-07T14:44:18Z")

</div>

I havent used influxdb before but i notice that your `msg.payload` is an **array**.  
Does it need to be an array ?

I was reading the [documenation](https://flows.nodered.org/node/node-red-contrib-influxdb) of the node and i dont see an example where the payload is a _single_ element array. There is an example of the payload being an object

```auto
msg.payload = {
    intValue: '10i',
    numValue: 123.0,
    strValue: "message",
    randomValue: Math.random()*10
}
return msg;

```

so in your case that would be

```auto
msg.payload = {
    image: msg.payload.image,
    description: msg.payload.Description

}
return msg;

```

can you make a backup of your db (if you have important data) re-test and see how the data is returned after the query ? we must get the **image** and **description** in the same array element

maybe someone more experienced with influx can advice you

[Next page](https://discourse.nodered.org/t/show-images-from-a-template/63493.md?page=2)