Express.static not pulling images from public directory

Question

As mentioned, express is not pulling the images from image folder in the public directory, even though it is pulling the styles.css file which is in the css folder in the public directory.

The directory public contains 2 folders one for css and on for images.

I also tried adding app.use(express.static('images')); to even target the image folder within the public directory, however that didn't work either. While images with only a link address show up, the images from the directory do not.

Any help would be greatly appreciated, I've done a fair bit of googling, but continue getting the same answer -- use express.static - I also tried adding the __dirname in front of the 'public' but that created an error.

The code for my server is as follows:

const express = require("express");
const bodyParser=require("body-parser")
const ejs = require('ejs');


const app = express();


app.set("view engine", "ejs");

app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static('public'));


app.get("/", function(req, res){
    res.render("index");
});

app.get("/prices", function(req, res, ){
    res.render("prices");
});

app.get("/about", function(req, res, ){
    res.render("about");
});
app.get("/contact", function(req, res, ){
    res.render("contact");
});

const PORT = process.env || 3000;

app.listen(3000,function(){
    console.log("server started")

});

Here is also a snip of my html -- the header.ejs file -- in which the logo should be shown, but is not.

In terms of using the ```__dirname''' it was implemented as such

   app.use(express.static(__dirname, 'public'));

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delta Designs | Web Design for the Future</title>

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Sacramento&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
        rel="stylesheet">


    <!-- CSS StyleSheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/css/styles.css">



    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/ef786af6a6.js" crossorigin="anonymous"></script>

    <!-- bootstrap scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
    </script>




<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">
        <img class="deltaLogo"  src="C:\Users\james\Web Dev\vandenbergDevelopment\public\images\1x\Asset 6@2x.png"
            href="#"></img></a>

    <div class="navbar-links">
        <ul class="navbar-nav flex">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/prices">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</a>

</div>
</head>
```

Answer 1

First, you don't need the full path on the src .

Second, you can`t have white spaces on the path.

So try to change the path to this, and tell me if it works.

<img class="deltaLogo"  src="\images\1x\Asset%206@2x.png"
            href="#"></img>

Express.static not pulling images from public directory

Question

1 answers

solution1
1 2021-02-16 12:02:33

Express.static not pulling images from public directory

Question

1 answers

solution1 1 2021-02-16 12:02:33

solution1
1 2021-02-16 12:02:33