Show Image file using NodeJS

Question

Using node.js and mongodb I want to upload image and show that image using it's id.

but When i run it, showing an error..

Error: Failed to lookup view "/showImage" in views directory "H:\NodeJS\AddImage \views"

searching a lot but couldn't find any proper and working solution for me.

what's the problem??

can anyone help??

thanks..

here is my code...........

app.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var path = require('path');
var multer = require('multer');
app.use(bodyParser.json());

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

var imagefile = require('./routes/imagefile');
app.set('view engine', 'ejs');
mongoose.connect('mongodb:..url');

imagefile(app);
app.listen(3000);

console.log('Running on port 3000');

imagefile.js

var express = require('express');
var multer = require('multer');
var mongoose = require('mongoose');
var fs = require('fs');

var imageSchema = mongoose.Schema({
      img: { data: Buffer, contentType: String },
      imageName : String
  });
var Item = mongoose.model('Clothes',imageSchema);

var storage = multer.diskStorage({
 destination: function(req, file, cb) {
 cb(null, 'public/')
 },
 filename: function(req, file, cb) {
 cb(null, file.originalname);
 }
});

var upload = multer({
 storage: storage
});

module.exports = function (app) {

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

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

  Item.findById(req.params.id, function (error, result) {
    //res.contentType(result.contentType);
    console.log(result.imageName);
    //res.end(result.image.buffer, "binary");
    res.render('/showImage',{imageName : result.imageName, imageId : result.imageName});
});
});

app.post('/', upload.any(), function(req, res, next) {

   var newItem = new Item();
   newItem.img.data = fs.readFileSync(req.files[0].path)
   newItem.img.contentType = 'image/png';
   newItem.imageName = req.files[0].originalname;
   newItem.save();
   res.render('index.ejs');

});

};

index.ejs

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action "/" method="POST" enctype="multipart/form-data">
      <input type="file" name="myimage" ></input>
      <input type="submit" name="submit" value="submit"></input>
    </form>
  </body>
</html>

showImage.ejs

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <h1><%= imageName %></h1>
    <h1><%= imageId %></h1>
    <div class="header">
      <img src='/public/36417514_2140268509321308_7450232816341614592_n.jpg %>' />
    </div>
  </body>
</html>

Rodrigo Mata · Accepted Answer · 2018-07-17 17:53:56Z

1

Remove the leading slash in this function:

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

   // Rest of the code
   // ...
   res.render('showImage', // <-- Remove slash
     {imageName : result.imageName, imageId : result.imageName});
   });
});

the problem is that it looks for file named '/showImage.ejs'.

answered Jul 17, 2018 at 17:53

Rodrigo Mata

1,8712 gold badges16 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Show Image file using NodeJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related