rendering image with express js

Question

Im new with node.js and express.js and Im trying to upgrade my front end project with them. I managed to get everything perfect except for my images to load. i have tried all possible solutions that i could find and still no happy ending. My project has a generic express file structure.

my app.js:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

example div containing image:

here is the message i get on the terminal: "GET /images/logoRV.png 200 0.714 ms - 856"

here is what the inspector tells me in the resources tab: "An error ocurred trying to load the resource"

UPDATE: apparently the problem was that i had an alias of the image in that folder instead of the original... after saving the original it rendered correctly. thanks to everybody who tried to help.

user_3417206 · Answer

Your express server requests the images via a GET request, if you are not getting a response for the images I would suggest revising your headers configuration, looking at the solutions above this should have worked already but "if not resolved yet" the following configuration might help:

app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', '*'); // change '*' to domain to restrict access to domain only
 res.header(
  'Access-Control-Allow-Headers',
  'Origin, X-Requested-With, ContentType, Accept, Authorization'
 );
 if (req.method === 'OPTIONS') {
  // This will tell express that GET requests to images should be allowed
  res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET'); 
  res.status(200).json({});
 }
 next();
});

An explanation to file serving can be found here: http://expressjs.com/en/api.html#res.sendFile

rendering image with express js

3 Answers