CODEWITHSUNDEEP
javascripthtmlcssnode.jsexpress
user7540364
user7540364

Reputation:

cant show image on pug

This is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
<img src="resources/mainlogo.png" style="width:304px;height:228px;">
<h1>Welcome to our user management application</h1>
<h3>Please see links below to navigate our homepage</h3>

<a href = /adduser>Create new user</a>
<a href = /users>List users</a>

</body>
</html>

everything except image is shown

Here is my file structure:

index.html
resources
  mainlogo.png

What am I doing wrong?

this is rendering code

app.get('/', function (req, res) {

    // render main page
    res.sendFile(__dirname + "/index.html");


});

Here is also error from console

Error http://localhost:8000/resources/mainlogo.png 404 (Not Found)

Despite image is inside resources folder.

Upvotes: 2

Views: 2667

Answers (3)

Pineda
Pineda

Reputation: 7593

You need to use theexpress.static middleware in order to serve static files like images and CSS files.

In you case, this should work:

app.use(express.static('resources'));

Checkout the static documentation for displaying static files

Upvotes: 0

matt
matt

Reputation: 1753

You need to make the resources folder accessible via express.static. This should do the trick:

app.use(express.static('resources')); //This will allow express to access any file in that folder

Html:

...
<img src="mainlogo.png" style="width:304px;height:228px;">
...

Upvotes: 1

user7540364
user7540364

Reputation:

adding this

app.use(express.static('resources'))

and changing this

<img src="mainlogo.png" style="width:304px;height:228px;">

helped

Upvotes: 0

Related Questions