Why Node.js not recognizing image path

Question

I'm trying to get my images to load up using node the relative path; however it keeps giving me a 404 error (not found). Here is my code:

var express = require("express");
var app = express();

app.use(express.static("public"));
app.set("view engine", "ejs");
app.get("/", function(req,res){
  res.render("home");
});


app.get("/fallinlovewith/:thing", function(req, res){
  var thing = req.params.thing; 
  res.render("love", {thingVar: thing});
});


app.get("/posts", function(req, res) {
    var posts = [
        {title: "Post 1", author: "Susy" },
        {title: "My adorable pet Bunny!", author: "Bob" },
        {title: "Can you belive this pomsky?", author: "Ethan" },
      ];

  res.render("posts", {posts: posts});
});

app.listen(process.env.PORT, process.env.IP, function(){
console.log("server started");
});

Here is my home.ejs file

<% include  partials/header %>
<h1>This is the home page</h1>
<img src="https://i.ytimg.com/vi/gp3ZKiwZMvg/hqdefault.jpg">
<img src="public/images/rsz_biopic.jpg"></img>
<% include  partials/footer %>

My css file, and image src http path are both working, It's just the relative path. If anyone could help out that would be awesome!

What is the full text of the error message, and what does your directory structure look like? — J. Titus
– J. Titus, Commented Jun 26, 2017 at 16:58

Damien · Accepted Answer · 2017-06-26 17:04:14Z

4

Change <img src="public/images/rsz_biopic.jpg"></img> to <img src="images/rsz_biopic.jpg"></img>. Basically, remove public.

You already name public the folder for static files app.use(express.static("public"));. It shouldn't be used again in the path for the files.

<% include  partials/header %>
<h1>This is the home page</h1>
<img src="https://i.ytimg.com/vi/gp3ZKiwZMvg/hqdefault.jpg">
<img src="images/rsz_biopic.jpg"></img>
<% include  partials/footer %>

answered Jun 26, 2017 at 17:04

Damien

1,6501 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ethan Franson Over a year ago

That fixed it! Thanks so much, I really appreciate your help!

Christian4423 · Accepted Answer · 2017-06-26 17:53:24Z

4

Add to top of file:

var path = require('path'),

You need to define that path in node.

Change:

app.use(express.static("public"));

To:

app.use("/public", express.static(path.join(__dirname, 'public')));

This way "/public" is a valid location

edited Jun 26, 2017 at 17:53

answered Jun 26, 2017 at 17:14

Christian4423

1,8072 gold badges16 silver badges26 bronze badges

3 Comments

Damien Over a year ago

That's correct. But he needs to require path package.

Ethan Franson Over a year ago

I'm assuming 'path' is a package I will need to npm install before this example works?

Christian4423 Over a year ago

It is built into node I believe.

Collectives™ on Stack Overflow

Why Node.js not recognizing image path

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related