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

[Shariq]

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.

2.

Although the alerts are functional and can be clicked accordingly.

Any idea where to look at?

[TotallyInformation]

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.

[Shariq]

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

[TotallyInformation]

@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.

[Shariq]

Hi Totallyinformation,
Sorry for the delayed response.

This is what i mean

if the html file has the following lines:

<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:

Else if if give full path

 <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

[TotallyInformation]

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?

[Shariq]

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?

[TotallyInformation]

@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:

    /** 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.

[Shariq]

Hello,

@TotallyInformation

process.env.httpStatic || path.join('.', 'public')

What is the windows version of the same?

[TotallyInformation]

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