# Not getting "pictures" on dashboard

**URL:** <https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794>\
**Category:** Dashboard\
**Created:** [14 April 2020 07:12 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794 "2020-04-14T07:12:20Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [14 April 2020 07:12 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/1 "2020-04-14T07:12:20Z")

</div>

I've read this:  
[Reply #2.](https://discourse.nodered.org/t/getting-image-in-dashboard/228/2)

This is what I have in the node:

 ![Screenshot from 2020-04-14 17-04-18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/e/2e0052c5e795855478292759f5c41cfac84278cc.png)

Ok, not the right picture, but it isn't working.

This is to prove the picture exists:

 ![Screenshot from 2020-04-14 17-08-10](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9dacd0074f67458fd469c85d3bb86e84a735263.png)

And this is an extract from the `settings.js` file:

```auto
    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',
    httpStatic: '/home/me/.node-red/public',

    // The maximum size of HTTP request that will be accepted by the runtime api.
    // Default: 5mb

```

And this is the `dashboard`

 ![Screenshot from 2020-04-14 17-11-20](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16f72e4fbbe5d414a27cde82b9b2d150c6dd54fe.png)

So what am I missing?

---

<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:** [14 April 2020 08:11 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/2 "2020-04-14T08:11:21Z")

</div>

Press F12 and look around Dev tools - you will possibly see a 404 error

Try using `Pictures/metal_7.jpg` and other variations.

Try typing into URL bar of browser the full URL [http://IP:1880/Pictures/metal\_7.jpg](http://IP:1880/Pictures/metal_7.jpg) etc see if you can pin it down

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [14 April 2020 08:17 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/3 "2020-04-14T08:17:51Z")

</div>

I'm guessing this means a lot, but I don't know how to parse it.  
(I changed the name to metal\_2 and it still doesn't work.)

![Screenshot from 2020-04-14 18-15-35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d1bac48136ddce4787f803830841dac53d46fca9.png)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [14 April 2020 08:40 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/4 "2020-04-14T08:40:45Z")

</div>

First, as Steve said, test to see if you can load the image at all by opening the url `http://...:1880/Pictures/metal_7.jpg`. If that works, then you have got `httpStatic` properly configured.

The screenshot you've just shared shows the CSS is badly formed. You can see it has crossed out the line with your background-image statement.

The problem is with the CSS you have in the template node. You have got the `#TV_Remote_control mode {`nested inside `body` - which is not valid css.

Without knowing the structure of your page, its hard to say what you should change that to. As a guess, move the `#TV_Remote_control` block outside of the `body` block:

```auto
<style>
#TV_Remote_control mode {
    background-image: ....
}
body {
    ....
}
</style>

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [14 April 2020 08:48 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/5 "2020-04-14T08:48:10Z")

</div>

Sorry. I forgot to do the first part.

But, it works.

(See)

 ![Screenshot from 2020-04-14 18-43-13](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/106a07a19c4cac87f6a13abc37d0cfaac12c68cd.png)

The code in the node is this:

```auto
<style>
    body {
        #TV_Remote_control mode{
        background-image: url("/Pictures/metal_2.jpg");
        background-repeat: repeat;

    }
}
 </style>

```

You say:

> [@knolleary](#):
>
> The problem is with the CSS you have in the template node. You have got the `#TV_Remote_control mode {` nested inside `body` - which is not valid css.

But that is against this:

```auto
<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

```

Which is what I read.

I can only know what I read.

Before I read the reply, the code works on another machine only as is.

It gives a background pattern/picture to the page.

So....... I'm stuck.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [14 April 2020 08:53 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/6 "2020-04-14T08:53:40Z")

</div>

> [@Trying\_to\_learn](#):
>
> Before I read the reply, the code works on another machine only as is.

Does it really? Exactly like you have it? I find that curious because it is invalid css.

> [@Trying\_to\_learn](#):
>
> So....... I'm stuck.

Well, as you say, you can only know what you read. I made a suggestion for something to try - have you?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [14 April 2020 08:58 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/7 "2020-04-14T08:58:56Z")

</div>

Nick, here is what I have on another machine.

It is a single `template` node. No input, no output.

metal\_4 is the background "image".

 ![Screenshot from 2020-04-14 18-51-48](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/bec414eb54b4547c8a1b0af1b772516eee4282a3.png)

 ![Screenshot from 2020-04-14 18-51-55](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b362bc9a8a1c897fc88d272b22f8bcf0ebdd9c2.png)

 ![Screenshot from 2020-04-14 18-52-07](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d00cc275559634393f3d06447d50b526db13e567.png)

Where did I get confused?  
May 2018:

```auto
Hi @mammoet

If you have set httpStatic to /home/pi/image then any file you have in that directory can be accessed from http://localhost:1880/

For example, if your background image is /home/pi/image/my-image.png then you should be able to access that as http://localhost:1880/my-image.png

Following the example on the mailing list you’ve linked to, you can insert the following into a ui_template node within your dashboard:

<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

```

Yes, NR has moved on since then. The machine I showed you the screen shots is running NR 1.0.3 RasPi.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [14 April 2020 09:06 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/8 "2020-04-14T09:06:04Z")

</div>

You said you had exactly the same thing working on a different machine. You've now shared a screenshot showing different content to what you are trying to use.

Here is what you shared from the current machine that is not working:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/703f31eff414c233eab6ca1958c3041f1b7a1938.png)

Here is what you just shared from the machine that is working:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22cccbb23bfa5e862d1e351222a1bf85c9d58d1b.png)

They are **different**.

In the working template, the `background-*` rules are inside the `body` selector.

In the not-working template, the `background-*` rules are inside a selector `#TV_Remote_control mode` which is invalidly nested inside `body`.

I'll ask one more time - have you **tried** what I have suggested? The screenshots you have shared only confirm what I said was the issue and that you need to fix the CSS.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [14 April 2020 09:11 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/9 "2020-04-14T09:11:11Z")

</div>

sorry sorry sorry.

I got "trapped" with the

```auto
    body {
        background-image: url("/Pictures/metal_4.jpg");
        background-repeat: repeat;
    }
    #Events_Uplink {
    background-image: url("/Pictures/metal_2.jpg");
    }
}

```

`#events_uplink` part which is a layer further in/down.

Now I see it, I deleted the two lines and it is working.

Just think how anxious I am to try and rebuild the 2 years of flows I have lost.  
(yeah: my problem.)

Thanks.

I seem to have a problem seeing the structures. Maybe because I am not used to them.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [14 April 2020 09:24 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/10 "2020-04-14T09:24:00Z")

</div>

Just to share:

This is now what my "dashboard" looks like:

 ![Screenshot from 2020-04-14 19-23-37](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5a8295512cd425e26b10115893e93db0d9f1058d.png)

---

<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:** [14 April 2020 10:37 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/11 "2020-04-14T10:37:58Z")

</div>

> [@Trying\_to\_learn](#):
>
> Just think how anxious I am to try and rebuild the 2 years of flows I have lost.

Have you got any other systems without up to date backups?  
If so what tasks have you got at the top of your priority list?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [14 April 2020 10:43 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/12 "2020-04-14T10:43:52Z")

</div>

Well, luckily no. As fas as software that is.

And I have a couple of 5TB drives which have backups of stuff.

The other machines back them selves up (manually) when I press a button.  
I do need to copy the back ups from the SD card to the next (higher) level of backing up.

---

<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:** [14 May 2020 10:43 UTC](https://discourse.nodered.org/t/not-getting-pictures-on-dashboard/24794/13 "2020-05-14T10:43:59Z")

</div>

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