# Image not displayed in node-red-contrib-ui-media

**URL:** <https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662>\
**Category:** Dashboard\
**Created:** [9 September 2020 02:41 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662 "2020-09-09T02:41:40Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [9 September 2020 02:41 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/1 "2020-09-09T02:41:40Z")

</div>

@gfcittolin

Thank you for this node as it has really made something easy. I have tried to use it but the image is not displaying and I am not certain of what I have missed? Would I be able to use 1 ui-media node with some scripting to select 1 of three images depending on the value from a Modbus address?

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a8c5866fa9423cd0f69afa2b865c9a3357f7a96c.jpeg)

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

I have tried with .png and .jpeg files with no luck.

---

<div class="post-metadata">

**Author:** ![gfcittolin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gfcittolin/32/23354_2.png) [@gfcittolin](https://discourse.nodered.org/u/gfcittolin)\
**Post date:** [9 September 2020 16:49 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/2 "2020-09-09T16:49:48Z")

</div>

Hi @DrdP, thank you, and I hope it's being useful to your projects!

Yes, you should be able to change the image being displayed according to some input. For that, the ui-media node expects as the payload a string with the exact content as displayed in the "Link" field, where you upload the images. By sending the appropriate "link", you can choose which image is displayed.

If you still can't make it work, please post your flow here so we can maybe find the culprit of why it's not working

---

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [9 September 2020 20:35 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/3 "2020-09-09T20:35:29Z")

</div>

Hi @gfcittolin,

Do you perhaps have an example of how the ui-media node should be used in a flow? This is my first time using the ui-media node. I have just put the node into a new flow with nothing else. I have tried triggering it with a timestamp but it still doesn't work it just shows the picture symbol as you can see in the screenshot of the dashboard in my previous response.

Thanks

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [9 September 2020 21:17 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/4 "2020-09-09T21:17:12Z")

</div>

@gfcittolin @DrdP This topic moved to it's own thread, as it was off-topic with previous thread - [Contribute ui-media to node-red-ui-nodes](https://discourse.nodered.org/t/contribute-ui-media-to-node-red-ui-nodes/18990/3)

---

<div class="post-metadata">

**Author:** ![gfcittolin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gfcittolin/32/23354_2.png) [@gfcittolin](https://discourse.nodered.org/u/gfcittolin)\
**Post date:** [10 September 2020 19:03 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/5 "2020-09-10T19:03:43Z")

</div>

You're almost there. But instead of injecting a timestamp, you should put a string with the "link" field as the content. Like this:

 ![Peek 2020-09-10 16-00](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b01c0bc1c7507fe27581803b1f7f1c0d2d6427f3.gif)

I could put a flow snippet here, but it wouldn't work anyway, because the images I have are different from yours, and therefore the generated links would be different. And a gif is worth a thousand flows 🙂

---

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [10 September 2020 20:05 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/6 "2020-09-10T20:05:35Z")

</div>

Hello@gfcittolin

I have tried that without success it still shows the broken image symbol. I am not certain if its a version error?

Thanks

---

<div class="post-metadata">

**Author:** ![gfcittolin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gfcittolin/32/23354_2.png) [@gfcittolin](https://discourse.nodered.org/u/gfcittolin)\
**Post date:** [10 September 2020 20:46 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/7 "2020-09-10T20:46:29Z")

</div>

Could you post here the flow with what you've tried so far?

---

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [10 September 2020 21:22 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/8 "2020-09-10T21:22:11Z")

</div>

Here is the basic flow that I made, maybe there is something that I missed

```auto
[{"id":"c00e3999.53af28","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"f714a7ba.da6bd8","type":"ui_media","z":"c00e3999.53af28","group":"54d089.8da3af78","name":"","width":0,"height":0,"order":0,"category":"pump","file":"green pump.jpg","layout":"adjust","showcontrols":true,"loop":true,"onstart":false,"scope":"local","tooltip":"","x":870,"y":200,"wires":[[]]},{"id":"8b15ee20.5a0aa8","type":"inject","z":"c00e3999.53af28","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"pump/green pump.jpg","payloadType":"str","x":570,"y":200,"wires":[["f714a7ba.da6bd8"]]},{"id":"54d089.8da3af78","type":"ui_group","z":"","name":"test","tab":"fa0c0b04.5f6d28","order":1,"disp":true,"width":"6","collapse":false},{"id":"fa0c0b04.5f6d28","type":"ui_tab","z":"","name":"SD750 Status","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [10 September 2020 21:24 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/9 "2020-09-10T21:24:14Z")

</div>

Hi, in order to make code more readable and importable it is important to surround your code with three backticks  
`````  
`like this`  
`````

You can edit and correct your post by clicking the pencil icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [10 September 2020 21:26 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/10 "2020-09-10T21:26:56Z")

</div>

Hi  
Thanks for that is it correctly pasted now?

Thanks

---

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [28 September 2020 20:00 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/11 "2020-09-28T20:00:12Z")

</div>

Hi @gfcittolin,

Have you had any luck with what may be causing this issue? did you try my flow?

Thanks

---

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [25 November 2020 01:24 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/12 "2020-11-25T01:24:15Z")

</div>

This issue has been resolved by @wnasich he discovered an issue if the rpi is publishing via port forwarding.

---

<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:** [9 December 2020 01:24 UTC](https://discourse.nodered.org/t/image-not-displayed-in-node-red-contrib-ui-media/32662/13 "2020-12-09T01:24:15Z")

</div>

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