Cannot read files when in localhost

Question

I am running a Node.js Express server on localhost listening in port 3000. All my files are in "loginapp" folder.

This is what I do in node.js to open the index:

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
})

To reach account.htm, I use

            <a id = "anchor" href = "file:///C:/Users/alain.daccache/loginapp/account.htm"> Create an Account </a>

To read the background image, I use

     background-image: url("blueocean.jpg");

When I right click -> open file, I can see the codes (no file not found error). However, when I am in localhost:3000 on my browser, I don't have my background, and when I click on the anchor, nothing happens. Still, I do get the other information from the html file. What is wrong?

`file:///C:/Users/alain.daccache` — That's not localhost. That's not HTTP. — Quentin, Jul 24 '18 at 12:09

score 1 · Answer 1 · answered Jul 24 '18 at 12:07

1

You need to serve the images. Your blueocean.jpg needs to point to a location which your browser can access. This answer gives guidance on how to host static files:

static files with express.js

answered Jul 24 '18 at 12:07

OliverRadini

6,238
1
21
46

do you mean I should add app.use(express.static('loginapp')) then for the image use url("http://localhost:3000/blueocean.jpg");? – Alain Daccache Jul 24 '18 at 12:29
It depends on how you map your static files, but yes, that could potentially work – OliverRadini Jul 24 '18 at 12:37

score 1 · Answer 2 · answered Jul 24 '18 at 12:16

You need to be accessing your website by going to localhost:3000/

And then the href in your a tag needs needs to be a relative path, not the actual file. The “server” on your local machine needs to process the file first and then it should show. If your photo is in the root it’d be photo.jpg or whatnot, otherwise just chase it down your folder structure (i.e. /assets/images/photo.jpg)

Cannot read files when in localhost

2 Answers2