# Flowfuse dashboard issue displaying an image

**URL:** <https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 February 2026 12:14 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347 "2026-02-09T12:14:57Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 February 2026 12:14 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/1 "2026-02-09T12:14:57Z")

</div>

Could someone with more knowledge than myself with using a ui-template to display an image in D2 have a look at this issue please? The guy thinks that it is a bug but I I suspect it is just a matter of knowing how to do it. The problem is that the image is not retained when the template is not on the current page.

> <https://github.com/FlowFuse/node-red-dashboard/issues/2031>
>
> \### Current Behavior
> 
> \- images from the local file system can't be displayed on …a different page than the initiating controls are located
> \- text, comments etc. perfectly work
> \- using images on the same page (even different tab) as the controls perfectly work
> 
> \### Expected Behavior
> 
> \- images to show/hide should be controllable by controls in all pages of the project no matter where located
> 
> \### Steps To Reproduce
> 
> \- simply change ‘Group’ in properties of the template node to an other page than the controls
> 
> \### Environment
> 
> \- Dashboard version: 1.30.2
> \- Node-RED version: 4.1.3
> \- Node.js version: 20.20.0
> \- npm version: 10.8.2
> \- Platform/OS: RaspiOS Bookworm
> \- Browser: MS Edge Version 144.0.3719.92
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I can not provide an initial effort estimate

---

<div class="post-metadata">

**Author:** ![gemini86](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gemini86/32/70967_2.png) [@gemini86](https://discourse.nodered.org/u/gemini86)\
**Post date:** [9 February 2026 21:38 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/2 "2026-02-09T21:38:18Z")

</div>

Is the problem that the image is not remaining in tact when the template is moved to a different group or that it will not show anymore when clicking the buttons? Not entirely clear but either way, I used his example and when moving the template node to a new group, the image is still there and can be toggled by the buttons.

I cannot duplicate his issue, so I don't know what's going wrong for him. (browser console output may help)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 February 2026 21:59 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/3 "2026-02-09T21:59:47Z")

</div>

My understanding is that the issue arises when the template is on a different page to the button invoking it. The image does not then appear when switching to that page. But I may not be understanding fully.

---

<div class="post-metadata">

**Author:** ![gemini86](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gemini86/32/70967_2.png) [@gemini86](https://discourse.nodered.org/u/gemini86)\
**Post date:** [9 February 2026 22:17 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/4 "2026-02-09T22:17:37Z")

</div>

Yeah, I moved the template node first to a new group on the same page, still worked... then moved to a new page entirely (opened in a new window on my second monitor) and it still worked... the image that was sent to the node _before_ moving it to a new page was even still showing when I navigated to the new page in my browser.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 February 2026 01:21 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/5 "2026-02-10T01:21:22Z")

</div>

> [@Colin](#):
>
> My understanding is that the issue arises when the template is on a different page to the button invoking it. The image does not then appear when switching to that page. But I may not be understanding fully.

Isn't that because D2 removes the "page" that is navigated away from instead of retaining it in the browser? That's why I suggested adding the template to the head instead of the body. A template can be anywhere.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 February 2026 21:47 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/6 "2026-02-10T21:47:33Z")

</div>

Yes, I think the technique to be used is to watch for messages coming in and save the data, then in `mounted()` display it. The skeleton code included when a new ui-template is added includes the hooks to do that, and the documentation is pretty good I think.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 February 2026 22:15 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/7 "2026-02-10T22:15:25Z")

</div>

Seems very complex to me. 😉 🤣

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 February 2026 15:58 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/8 "2026-02-12T15:58:43Z")

</div>

This has all been cleared up now, it turns out that problem was seen when the template widget was viewed from a different browser tab to the button being clicked, not when the template was in a different dashboard page viewed in the same browser tab. Somehow the ui-template node type had been selected to respond to Client Data so that it was not updated if the button was clicked in a different browser tab.

---

<div class="post-metadata">

**Author:** ![gemini86](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gemini86/32/70967_2.png) [@gemini86](https://discourse.nodered.org/u/gemini86)\
**Post date:** [13 February 2026 03:35 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/9 "2026-02-13T03:35:24Z")

</div>

That should still work though... will test tomorrow.

---

<div class="post-metadata">

**Author:** ![gemini86](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gemini86/32/70967_2.png) [@gemini86](https://discourse.nodered.org/u/gemini86)\
**Post date:** [13 February 2026 03:35 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/10 "2026-02-13T03:35:57Z")

</div>

unless you open in another browser/incognito mode or something.

---

<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:** [27 February 2026 03:36 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-issue-displaying-an-image/100347/11 "2026-02-27T03:36:52Z")

</div>

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