CODEWITHSUNDEEP
javascripthtmlnode.jsejs
wengren11
wengren11

Reputation: 43

Can't display an image with EJS file in node.js

i'm new to node.js and my just playing with it to make a website. I want to display a picture on the website and that picture is in the same directory as my ejs file, but it does not show up.. Am i doing something wrong ? Thank you !

Backend code

const express = require('express')

//Init App
const app = express();

//Load view engine
app.set('view engine','ejs');

// Home route
app.get('/', function(req,res){
res.render('index.ejs');
});

app.listen(3000, function(){
console.log('Server started in port 3000...');
});

ejs file content: 

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
</head>
<body>
  <h1>Picture test</h1>
  <img src="/Users/aray/Documents/Projects/Node/views/test.jpg">
</body>
</html>

The project strcture is :

- Node
  - app.js
  - views
    - index.ejs
    - test.jpg

Upvotes: 2

Views: 7775

Answers (1)

Holger Will
Holger Will

Reputation: 7526

you have to put your images (and other assets) in separate folder and serve this folder with express.static:

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

- Node
  - app.js
  - views
    - index.ejs
  - public
    - test.jpg

<img src="test.jpg">

further information can be found in the express documentation: https://expressjs.com/en/starter/static-files.html

Upvotes: 4

Related Questions