# Image not getting displayed from the http server, but available in normal html file

**URL:** <https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793>\
**Category:** General\
**Tags:** http-request\
**Created:** [29 May 2023 18:50 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793 "2023-05-29T18:50:41Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shariq](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@Shariq](https://discourse.nodered.org/u/Shariq)\
**Post date:** [29 May 2023 18:50 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/1 "2023-05-29T18:50:41Z")

</div>

Hello,  
This had been a working web page for me before my computer broke down.  
A web page which shows image in a normal html file wont render in a node red hosted web page  
1.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af9f25a107aaa118e77fe3b26e8ecd28033e1d0b.png)  
2.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/50a1884a42071bae8f6820287345ad59354074d0.png)

Although the alerts are functional and can be clicked accordingly.

Any idea where to look at?

---

<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:** [29 May 2023 20:01 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/2 "2023-05-29T20:01:39Z")

</div>

You need to look first in the browser dev tools to look for errors and what might not be loading.

But you also need to tell us more about your config since there are lots of ways to serve up pages in Node-RED.

---

<div class="post-metadata">

**Author:** ![Shariq](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@Shariq](https://discourse.nodered.org/u/Shariq)\
**Post date:** [29 May 2023 20:13 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/3 "2023-05-29T20:13:26Z")

</div>

Hi there,  
I am getting some error like could not load file:// ...  
Or could not find house.png in browser console.

---

<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:** [29 May 2023 20:29 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/4 "2023-05-29T20:29:06Z")

</div>

> [@Shariq](#):
>
> file://

It would be easier for someone to help you if you shared more complete information.

However, a file URL loads a local file. You need to see http or https if you want to load the file from the server.

---

<div class="post-metadata">

**Author:** ![Shariq](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@Shariq](https://discourse.nodered.org/u/Shariq)\
**Post date:** [2 June 2023 14:08 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/5 "2023-06-02T14:08:59Z")

</div>

Hi Totallyinformation,  
Sorry for the delayed response.

This is what i mean

if the html file has the following lines:

```auto

<svg version="1.1" viewBox="0 0 804 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <image width="804" height="512" preserveAspectRatio="none" xlink:href="house.png"/>
 <a xlink:href= "javascript:void(0)" onclick="htmlroom('room1')" title="Room1" accesskey="Room1">
........
.......

```

Then im getting error like:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5f8e3f0f994330ca3c048478fc4a749abcd6ae1e.png)

Else if if give full path

```auto
 <image width="804" height="512" preserveAspectRatio="none" xlink:href="D:\Development\Home_Otomation\house.png"/>
.....

```

it will give similar error like file://D:/Development/Home\_Otomation/house.png etc  
Regards,  
Shariq

---

<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:** [2 June 2023 16:52 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/6 "2023-06-02T16:52:44Z")

</div>

You cannot load a file from their local PC (`D:\....`). This is blocked if loading the page itself from a server due to cross-domain security restrictions (and rightly so).

Your `xlink:href` is incorrectly written in both cases.

Where is the png file actually located (presumably on the server) and how have you configured Node-RED to tell it how to serve files from that location?

---

<div class="post-metadata">

**Author:** ![Shariq](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@Shariq](https://discourse.nodered.org/u/Shariq)\
**Post date:** [2 June 2023 18:03 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/7 "2023-06-02T18:03:53Z")

</div>

Exactly i also felt so.. thats why I had hosted them in the same node red server in a different end point http in using definite paths..  
This is working now but is that the correct way to do it?

---

<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:** [2 June 2023 19:50 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/8 "2023-06-02T19:50:58Z")

</div>

> [@Shariq](#):
>
> This is working now but is that the correct way to do it?

For a static image, the better way would be to use the `httpStatic` property in settings.js to define a static folder. From my setttings 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: process.env.httpStatic || path.join('.', 'public'),
    /* OR multiple static sources can be created using an array of objects... */
    // httpStatic: [
    // {path: path.join('.', 'pics'), root: "/img/"},
    // {path: path.join('.', 'reports'), root: "/doc/"},
    // ],

    /** All static routes will be appended to httpStaticRoot
     * e.g. if httpStatic = "/home/nol/docs" and httpStaticRoot = "/static/"
     * then "/home/nol/docs" will be served at "/static/"
     * e.g. if httpStatic = [{path: '/home/nol/pics/', root: "/img/"}]
     * and httpStaticRoot = "/static/"
     * then "/home/nol/pics/" will be served at "/static/img/"
     */
    // httpStaticRoot: '/static/',

```

You don't need to define an http-in/-out pair of nodes to serve static content.

---

<div class="post-metadata">

**Author:** ![Shariq](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@Shariq](https://discourse.nodered.org/u/Shariq)\
**Post date:** [2 June 2023 20:04 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/9 "2023-06-02T20:04:00Z")

</div>

Hello,

> [@TotallyInformation](#):
>
> `process.env.httpStatic || path.join('.', 'public')`

What is the windows version of the same?

---

<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:** [2 June 2023 21:41 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/10 "2023-06-02T21:41:37Z")

</div>

`path.join` is cross-platform which is why I use it.

---

<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:** [1 August 2023 21:41 UTC](https://discourse.nodered.org/t/image-not-getting-displayed-from-the-http-server-but-available-in-normal-html-file/78793/11 "2023-08-01T21:41:50Z")

</div>

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