CODEWITHSUNDEEP
html
Alain Daccache
Alain Daccache

Reputation: 125

Cannot read files when in localhost

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?

Upvotes: 2

Views: 1887

Answers (2)

The Magisterial
The Magisterial

Reputation: 73

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)

Upvotes: 1

OliverRadini
OliverRadini

Reputation: 6467

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

Upvotes: 1

Related Questions