# I have problem about viewing image from esp32 cam on nodered

**URL:** <https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560>\
**Category:** General\
**Created:** [9 December 2023 17:45 UTC](https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560 "2023-12-09T17:45:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![roaa](https://avatars.discourse-cdn.com/v4/letter/r/7ea924/32.png) [@roaa](https://discourse.nodered.org/u/roaa)\
**Post date:** [9 December 2023 17:45 UTC](https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560/1 "2023-12-09T17:45:53Z")

</div>

Hi ....i use esp32-cam with nodered and mqtt  
i use node-red version: v3.1.0  
node.js version v20.9.0  
My problem is that the image is not displayed on Nodered even though it is received and sent on Mosquitto "image not found"  
I think the problem here is where a line appears under the last part from src  
`<img width="100%" height="100%" alt="Image not found" src="data:image/png;base64,{{msg.payload}}" />`  
or the problem in the image display path  
I don't know if msg.payload contains the correct Base64-encoded image data when the flow is executed.I think the base64 node is not working properly.but I don't know how I can make it work correctly  
......Or in the command windows there is problem in connect with esp32 and mqtt

---

<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:** [9 December 2023 18:40 UTC](https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560/2 "2023-12-09T18:40:54Z")

</div>

> [@roaa](#):
>
> `<img width="100%" height="100%" alt="Image not found" src="data:image/png;base64,{{msg.payload}}" />`

Where is this written? In what kind of node?

Looking at it, it _should_ be a regular template not a ui-template since that's NOT how you transmit values.

Search the forum for "MQTT image dashboard" for a working solution's

---

<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:** [9 December 2023 18:42 UTC](https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560/3 "2023-12-09T18:42:51Z")

</div>

Quick Search: [Show image from mqtt subscription - #2 by Steve-Mcl](https://discourse.nodered.org/t/show-image-from-mqtt-subscription/81459/2)

---

<div class="post-metadata">

**Author:** ![roaa](https://avatars.discourse-cdn.com/v4/letter/r/7ea924/32.png) [@roaa](https://discourse.nodered.org/u/roaa)\
**Post date:** [10 December 2023 13:31 UTC](https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560/4 "2023-12-10T13:31:27Z")

</div>

This written in template after base 64  
i do like this vedio

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e2e8662dbedc1644ffe5103dc18b016b31305dae.jpeg "How to Control ESP32 CAM from Node-Red UI using MQTT") ](https://www.youtube.com/watch?v=L_rqYK_QUCg)

---

<div class="post-metadata">

**Author:** ![roaa](https://avatars.discourse-cdn.com/v4/letter/r/7ea924/32.png) [@roaa](https://discourse.nodered.org/u/roaa)\
**Post date:** [10 December 2023 14:34 UTC](https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560/5 "2023-12-10T14:34:24Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f675fbd5b03ba8b60493f5dcbcfd9ceaecd33466.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c53bef0dfcb515e466acb2de7f1194d5f1e64d25.jpeg)

---

<div class="post-metadata">

**Author:** ![roaa](https://avatars.discourse-cdn.com/v4/letter/r/7ea924/32.png) [@roaa](https://discourse.nodered.org/u/roaa)\
**Post date:** [10 December 2023 14:39 UTC](https://discourse.nodered.org/t/i-have-problem-about-viewing-image-from-esp32-cam-on-nodered/83560/6 "2023-12-10T14:39:01Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/9/19c24630432c198fee8cc024d4c90edaa7622ddc.jpeg)