# Template image not showing

**URL:** <https://discourse.nodered.org/t/template-image-not-showing/78091>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [2 May 2023 05:35 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091 "2023-05-02T05:35:59Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [2 May 2023 05:35 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/1 "2023-05-02T05:35:59Z")

</div>

i added a image in template node  
but image is not showing.i write this code on template editor.  
 ![]()

 ![Dash_logo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/21f3b0e096a782939fefd747165605af8864b092.png)

---

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [2 May 2023 05:55 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/2 "2023-05-02T05:55:48Z")

</div>

![image_Add](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/0599a440c94efa9ba06af57bd8d1fa9ca86c2438.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [2 May 2023 06:43 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/3 "2023-05-02T06:43:20Z")

</div>

Do you mean an image ,bmp .jpg .or a web page .html ?

---

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [2 May 2023 06:56 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/4 "2023-05-02T06:56:48Z")

</div>

image in jpg format

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [2 May 2023 07:12 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/5 "2023-05-02T07:12:47Z")

</div>

In settings.js there is a setting for httpStatic, you need to set this path to a location where you want to serve your images from. Then restart NR.

eg create a folder in your NR directory called images and set the path to `'./images'` then use

```auto
<img src="filename">

```

---

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [2 May 2023 08:02 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/6 "2023-05-02T08:02:13Z")

</div>

I created the Folder.and given the path but my NR is stopped after path is defined please check am i make changes on correct location.

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/75688f2de3b231c3dcacc863203cd1cfbaf15c0d.png)  
 ![Capture2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/e/2e2668b75f513cb530c41873f0ec2009e07da2de.png)  
 ![Setting.js](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/217d3fba605aa8ba8360efc7c97cb53e9a0d560c.png)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [2 May 2023 14:17 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/7 "2023-05-02T14:17:30Z")

</div>

No, not correct, you have two paths defined, you should only have one (what I know)

Besides that, I use also a slash in front of my image names

Like

`img src="/captured31.jpg"`

---

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [2 May 2023 14:54 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/8 "2023-05-02T14:54:38Z")

</div>

When i make changes on httpstatic and define path node-red not able to start.when i launch from cmd it generate error.

---

<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:** [2 May 2023 15:25 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/9 "2023-05-02T15:25:28Z")

</div>

Backslashes need to be escaped with another backslash. E.g. `c:\\users\\xxx\\...`

Better yet, use regular slashes. E.g. `c:/users/xxx/...`

Lastly, remove the `nol/` example.

---

<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:** [2 May 2023 15:27 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/10 "2023-05-02T15:27:14Z")

</div>

Also, in your screenshot, you have 2 `httpStatic: ` entries. This is not valid. There should be only one.

---

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [3 May 2023 04:29 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/11 "2023-05-03T04:29:42Z")

</div>

I Did this but still image is not showing

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bfe82b209f52a74803856a640731cf6019e2684d.png)  
 ![image_location](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d1f5a5098af709f627a4d9cac7a0848b4642f64.png)  
 ![image_not_showing](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d953f357e173250ccaf748c2f647707fc010e74f.png)  
 ![nodejs_setting](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16dfad71bb9d5c73385ec46afb8e801fae147cb4.png)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [3 May 2023 13:37 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/12 "2023-05-03T13:37:11Z")

</div>

You run under Windows....I do not

Access rights to folder for images?

Start Node-Red from command prompt:

node-red-start

study what is printed, copy & paste here so we can help debugging

---

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [3 May 2023 19:37 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/13 "2023-05-03T19:37:54Z")

</div>

Microsoft Windows [Version 10.0.19045.2846]  
(c) Microsoft Corporation. All rights reserved.

C:\Users\Admin\>node-red  
4 May 01:04:58 - [info]

# Welcome to Node-RED

4 May 01:04:58 - [info] Node-RED version: v3.0.2  
4 May 01:04:58 - [info] Node.js version: v18.16.0  
4 May 01:04:58 - [info] Windows\_NT 10.0.19045 x64 LE  
4 May 01:05:00 - [info] Loading palette nodes  
4 May 01:05:15 - [info] Worldmap version 2.37.2  
4 May 01:05:15 - [info] Dashboard version 3.4.0 started at /ui  
cpu backend was already registered. Reusing existing backend factory.  
Platform node has already been set. Overwriting the platform with [object Object].  
4 May 01:05:16 - [warn] ------------------------------------------------------  
4 May 01:05:16 - [warn] [@binsoul/node-red-contrib-string-extract/binsoul-string-extract] Error: Cannot find module 'jsonata'  
Require stack:

- C:\Users\Admin.node-red\node\_modules@binsoul\node-red-contrib-string-extract\dist\string-extract\Action\ExtractAction.js
- C:\Users\Admin.node-red\node\_modules@binsoul\node-red-contrib-string-extract\dist\string-extract\ActionFactory.js
- C:\Users\Admin.node-red\node\_modules@binsoul\node-red-contrib-string-extract\dist\string-extract\Node.js
- C:\Users\Admin\AppData\Roaming\npm\node\_modules\node-red\node\_modules@node-red\registry\lib\loader.js
- C:\Users\Admin\AppData\Roaming\npm\node\_modules\node-red\node\_modules@node-red\registry\lib\index.js
- C:\Users\Admin\AppData\Roaming\npm\node\_modules\node-red\node\_modules@node-red\runtime\lib\nodes\index.js
- C:\Users\Admin\AppData\Roaming\npm\node\_modules\node-red\node\_modules@node-red\runtime\lib\index.js
- C:\Users\Admin\AppData\Roaming\npm\node\_modules\node-red\lib\red.js
- C:\Users\Admin\AppData\Roaming\npm\node\_modules\node-red\red.js  
4 May 01:05:16 - [warn] ------------------------------------------------------  
4 May 01:05:16 - [info] Settings file : C:\Users\Admin.node-red\settings.js  
4 May 01:05:16 - [info] Context store : 'default' [module=memory]  
4 May 01:05:16 - [info] User directory : \Users\Admin.node-red  
4 May 01:05:16 - [warn] Projects disabled : git command not found  
4 May 01:05:16 - [info] Flows file : \Users\Admin.node-red\flows.json  
4 May 01:05:16 - [info] Server now running at [http://127.0.0.1:1880/](http://127.0.0.1:1880/)  
4 May 01:05:16 - [warn]

* * *

Your flow credentials file is encrypted using a system-generated key.

If the system-generated key is lost for any reason, your credentials  
file will not be recoverable, you will have to delete it and re-enter  
your credentials.

## You should set your own key using the 'credentialSecret' option in your settings file. Node-RED will then re-encrypt your credentials file using your chosen key the next time you deploy a change.

4 May 01:05:16 - [info] Starting flows  
Ignoring invalid timezone passed to Connection: IST. This is currently a warning, but in future versions of MySQL2, an error will be thrown if you pass an invalid configuration option to a Connection  
4 May 01:05:16 - [info] Started flows  
4 May 01:05:16 - [info] [aedes broker:fa484b8951534360] Binding aedes mqtt server on port: 1883  
4 May 01:05:16 - [info] [mqtt-broker:ccd1cd629d5fb1f4] Connected to broker: mqtt://192.168.0.169:1883

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [3 May 2023 19:46 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/14 "2023-05-03T19:46:32Z")

</div>

> [@PRABHAKAR82](#):
>
> ![nodejs_setting](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16dfad71bb9d5c73385ec46afb8e801fae147cb4.png)
> 
> nodejs\_setting897×801 19.5 KB

Looks to me like your httpStatic setting is in a commented section of the settings file.  
Try adding `*/` above it

---

<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:** [3 May 2023 19:55 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/15 "2023-05-03T19:55:51Z")

</div>

2 tips.

1. Please don't post screenshots. We cannot check them in a code editor

2. Use a proper code editor to view the js file (e.g. VSCode) and you will see much clearer what is going on.

As @E1cid points out, the `httpStatic` entry is commented out due to a bad edit but since you are using notepad, you cannot see it.

  

Oh, one more tip, when posting code and logs, please wrap them in a code fence.

##### canned text:

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

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:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [3 May 2023 21:25 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/16 "2023-05-03T21:25:01Z")

</div>

Thanks all for your valuable support.my problem solved.  
thank you

---

<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:** [17 May 2023 21:25 UTC](https://discourse.nodered.org/t/template-image-not-showing/78091/17 "2023-05-17T21:25:18Z")

</div>

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