Dashboard 2.0 table image

Dashboard
1

Hello!

Is it possible to display an image on dashboard 2.0 table?

2

Do you mean within a row of data, or as the background of the table?

3

Hello!

The link is in the row of data

4

Thanks for clarifying, we could add an "image" cell type, we don't have one currently, but the tricky piece around images is how tall/wide we make the cell.

5

Thanks for the info.
I think if the image is 120px high that's enough.

6

Thanks @madmax - I've added it as a Feature Request to our GitHub repo: Table: Add "image" cell type Ā· Issue #1418 Ā· FlowFuse/node-red-dashboard Ā· GitHub

In the mean time, you could use a Template node, and build your own using the underlying Vuetify component library: UI Template Examples | Node-RED Dashboard 2.0

7

Thanks for the help.

Another question: Can I display a photo (base64) on the dashboard? If so, how does that work?

8

This is a new question. For the sake of future readers looking for a similar feature, it is better off in a new thread.

That said, this has been asked and answered quite a few times already: Search results for '#dashboard-2 image base64 order:latest' - Node-RED Forum

9

add column

set it as HTML

my is using function to send data to the table JSON array
the key of the object is html

<img src="${item.logoUrl}" alt="logo" style="width: 50px; height: 50px; margin-right: 0; vertical-align: middle; padding: 0;"/>

10

Have you managed to get that working? Just tried that myself, and it doesn't parse the ${item.logoUrl}

11

Use Chat GPT helps a lot with this kind of stuff

Yes it's working perfectly. I have function that reads the global array format a payload and

let logo = global.get('logos') || []; //checks if it is empty "[]" if not read global array logos

//Here it is formatting the message to return to the table node
return {
  item1: `<img src="${item.logoUrl}" alt="logo" style="width: 50px; 
height: 50px; margin-right: 0; vertical-align: middle; padding: 0;"/>`
};
return msg; // Return the formatted message payload

then in the table node

add new column

key: item1
label: icon
type: html

12

The code block you have provided doesn't make any sense. There is no item variable from which to read logoUrl, and you've got two return statements, the first of which sends { item1 }, meaning that the payload is now empty and therefore the Table node would not have anything to read.

13

Here you go:

1 Like
14

My information comes from the global array where other flows are assembling