CODEWITHSUNDEEP
htmlnode.js
Anton Loubman
Anton Loubman

Reputation: 71

How do I get the browser to display the image?

I want to display an image on a page in the browser but for some reason it will only display the alt tag (in addition to the ordered list below it). The path to the image is correct, it can be seen to the left in the screenshot above (I added the HTML code at the bottom). VSCode also suggests files while building the path in the img tag and it successfully finds the image 'test.jpg'.

html code for page

The screenshot below is what gets displayed. The rest of the project is written in JavaScript (specifically Node), but again the problem seems to be only with displaying the image.

actual output on page

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test title</title>
</head>
<body>
    <img src="images/test.jpg" alt="Grandma with a gun">
    <ol>
        <li><a href="first">first</a></li>
        <li><a href="second"">second</a></li>
    </ol>
</body>
</html>

EDIT: added server code images below

app.js

routes.js

Upvotes: 0

Views: 815

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You're actually serving individual files, that's not the right way. For serving static files using Express, use the Express Static server.

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

And move all the static files into a director named static. Else, what you might have to do is:

app.get("/test.html", (req, res) => {
  res.sendFile("./test.html");
});
app.get("/images/test.jpg", (req, res) => {
  res.sendFile("./images/test.jpg");
});

Upvotes: 1

Related Questions