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

[DrdP]

@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?

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

[gfcittolin]

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

[DrdP]

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

[Paul-Reed]

@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

[gfcittolin]

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

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

[DrdP]

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

[gfcittolin]

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

[DrdP]

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

[{"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}]

[Steve-Mcl]

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

[DrdP]

Hi
Thanks for that is it correctly pasted now?

Thanks

[DrdP]

Hi @gfcittolin,

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

Thanks

[DrdP]

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