0

I am trying to set an Image in the PUG template engine of node.js by CSS but the picture is not appearing on the screen while other properties are working fine.

This is the Code of .PUG file of that section

section#introsection
        | Section for Pictures

This is the Code of css file that is included in .PUG file

#introsection{
background:center/cover no-repeat url("/static/bg.jpg")  ;
color: white;
display: flex;
height: 300px;
background-color: lightgreen;}

My picture is in the Static Folder as shown in the code. The other changes is the CSS file are reflected normally in the browser but no picture is appearing.

The error I am getting in the console is : localhost/:1 GET http://localhost/static/bg.jpg 404 (Not Found)

Rohit Arora
  • 1
  • 3
  • What errors do you see in the console? – Wais Kamal Jan 01 '21 at 09:50
  • localhost/:1 GET http://localhost/static/bg.jpg 404 (Not Found) – Rohit Arora Jan 01 '21 at 09:54
  • The path to your image is wrong. Make sure it is referenced relative to the CSS file. – Wais Kamal Jan 01 '21 at 09:57
  • If you put the URL`http://localhost/static/bg.jpg` directly into your browser, you will get a 404 error. You need to fix that, which means fixing how your server code serves up static content. The path you specify on the URL is relative to the URL root, but inside your server you have to code to map this route to a specific folder location. If you are using html package then you need to put in the code to deliver the file to the client. – JohnRC Jan 01 '21 at 10:59
  • Here is a good example https://stackoverflow.com/a/59088331/1992793 – JohnRC Jan 01 '21 at 11:01
  • Thanks! @JohnRC Please read my Answer. – Rohit Arora Jan 01 '21 at 13:48

2 Answers2

0

If your CSS file is in another folder then you need to give css like this.

background:center/cover no-repeat url("../static/bg.jpg");

If you still facing the issue then send me the page link.

DVS
  • 326
  • 1
  • 7
0

Thank you all for your support and Thank You JOHN RC for your suggestion.Actually there was a problem with my Static file serving I don't know what was that but I copy pasted some code from the official WebSite of Express.js that helped me out I will be more thankfull if you would explain me both the syntax . The error causing one and the one which solved my error. The syntax which was causing error was : app.use('./static',express.static('static')) and The syntax which solved my problem is : app.use('/static', express.static(path.join(__dirname, 'static'))).Please tell me what is the diffrence between these two both syntax are available on the official documentaton of Express.js.

Rohit Arora
  • 1
  • 3
  • Please ask a new question instead of posing question in an answer. – Sean Jan 01 '21 at 17:14
  • Also, it would have helped if you had made it clear that you were using `express.js`. I thought you were using the basic `html` package. You could have used the `express` tag to help make it clear. – JohnRC Jan 02 '21 at 10:37
  • I will keep it in mind from the next time thanks! – Rohit Arora Jan 05 '21 at 08:16