node js 画像

Question

現在node.js でウェブサイトを作っている初心者プログラマーです。
node を使うと画像が読み込めません。
説明が下手ですがお願いします。。

###発生している問題・エラーメッセージ

GET http://localhost:3000/player.jpg 404 (Not Found)

###該当のソースコード

//app.js
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var exphbs = require('express-handlebars');
var expressValidator = require('express-validator');
var flash = require('connect-flash');
var session = require('express-session');
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
var mongo = require('mongodb');
var mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/loginapp');
var db = mongoose.connection;

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

// Init App
var app = express();

// View Engine
app.set('views', path.join(__dirname, 'views'));
app.engine('handlebars', exphbs({defaultLayout:'layout'}));
app.set('view engine', 'handlebars');

// BodyParser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

// Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));

// Express Session
app.use(session({
    secret: 'secret',
    saveUninitialized: true,
    resave: true
}));

// Passport init
app.use(passport.initialize());
app.use(passport.session());

// Express Validator
app.use(expressValidator({
  errorFormatter: function(param, msg, value) {
      var namespace = param.split('.')
      , root    = namespace.shift()
      , formParam = root;

    while(namespace.length) {
      formParam += '[' + namespace.shift() + ']';
    }
    return {
      param : formParam,
      msg   : msg,
      value : value
    };
  }
}));

// Connect Flash
app.use(flash());

// Global Vars
app.use(function (req, res, next) {
  res.locals.success_msg = req.flash('success_msg');
  res.locals.error_msg = req.flash('error_msg');
  res.locals.error = req.flash('error');
  res.locals.user = req.user || null;
  next();
});



app.use('/', routes);
app.use('/users', users);

// Set Port
app.set('port', (process.env.PORT || 3000));

app.listen(app.get('port'), function(){
	console.log('Server started on port '+app.get('port'));
});

###試したこと
dirは
login file にapp.jsとviews file があり、views file の中にindex.handlebars(html)とplayer.jpgがあります。
index.handlebarsでplayer.jpgを表示させたいのですがエラー４０４が出てしまいます。

###index.handlebars

<h2 class="page-header">Open pack</h2> <p>Regular pack</p> <div class="contents"> <img src="/player.jpg" alt="pack"> </div>

よろしくお願いいたします

Answer 1

プログラムのjsファイルがあるフォルダに画像ファイルを配置してませんか？
としているので、publicフォルダ内に画像を配置すれば表示されるはずですが？

Comments

[kzs]

上手くいきませんでした。。
具体的なやり方を教えていただけると助かります。

[turbgraphics200]

どこに画像を配置しました？

Answer 2

ちなみに４０４になるのは画像(player.jpg)ですか？それともindex.htmlですか？とりあえずここではindex.htmlは見えていて、画像が見えないという認識で回答します。

上記の設定だと./app.jsと同じ階層にpublicというディレクトリがあって、serve-staticはその中にあるファイルを配信するという動作になるはずです。

具体的には前段にプロクシがいるのかどうかなどで全然変わってきますが、まずはturbgraphics200さんがおっしゃっているように、スクリプトと同一階層にpublicというディレクトリがあり、そこに画像ファイルを配置してあるかどうかを確認して見てください。

＃ディレクトリ構成が問題無い場合は、ファイル／ディレクトリのアクセス権の設定を見てみてください。expressを実行しているプロセスから読み取れないとエラーになると思います。