2017-12-22 4 views
-1

/viewsフォルダーと/views/partialsフォルダーからリンクしたときに静的イメージが完全に機能する問題がありますが、/views/courses/partialsの間にサブフォルダを置くとイメージが機能しなくなります。Expressはビュー/サブフォルダから静止画を切り取らない

私は app.use(express.static(__dirname + "/public"));

マイファイル構造を使用しています:私が使用

> app 
    - app.js 
    > public 
     > assets 
      > images 
       > icons 
        - link.png 
    > views 
     - landing.ejs 
     > partials 
      - header.ejs 
     > courses 
      - courses.ejs (images is working when linked from here) 
      > partials 
       - lectures.ejs //This file is a partial of courses.ejs (images not working when linked from here) 

パスはここ/assets/images/icons/link.png

ある

//REQUIREMENTS - requiering files for App.js 
var express = require("express"), 
    app = express(), 
    passport = require("passport"), 
    bodyParser = require("body-parser"), 
    mongoose = require("mongoose"), 
    flash = require("connect-flash"), 
    passportSetup = require("./config/passport"), 
    methodOverride = require("method-override"), 
    User = require("./models/user"), 
    Course = require("./models/course"), 
    middleware = require("./middleware"), 
    path = require("path"); 

//REQUIERING ROUTES - requiering routes files 
var indexRoutes = require("./routes/index"); 
var authRoutes = require("./routes/auth"); 
var adminRoutes = require("./routes/admin"); 
var messageRoutes = require("./routes/message"); 
var courseRoutes = require("./routes/courses"); 

// DATABASE CONNECTION - conecting to mongoDB using enviroment variables 
var dbUrl = "mongodb://localhost/example" || process.env.DATABASEURL; 
mongoose.connect(dbUrl); 

//METHOD OVERRIDE - override http method 
app.use(methodOverride("_method")); 

//FLASH MESSAGES - use flash messages 
app.use(flash()); 

//BODY PARSER - useing bodyparser to easely retreve http info 
app.use(bodyParser.urlencoded({extended: true})); 

//STATIC DIRECTORIES - use static directories for clientside linking 
app.use(express.static(__dirname + "/public")); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

//VIEW ENGINE - default view engine 
app.set("view engine", "ejs"); 

//PASSPORT CONFIGURATION - setting express session secret 
app.use(require("express-session")({ 
    secret: "************************", 
    resave: false, 
    saveUninitialized: false 
})); 
app.use(passport.initialize()); 
app.use(passport.session()); 

//CURRENT USER - sending current user to every route 
app.use(function(req, res, next){ 
    res.locals.currentUser = req.user; 
    next(); 
}); 

//ROUTES - all routes are used here 
app.use(authRoutes); 
app.use(adminRoutes); 
app.use(messageRoutes); 
app.use(courseRoutes); 
app.use(indexRoutes); 

//LISTENING PORT - port to listen to 
var port = 4000 || process.env.PORT; 

//LISTEN - listen on chosen port 
app.listen(port, process.env.IP,function(){ 
    //Startup message 
    console.log("Server has started!"); 
}); 

そして、ここにされ、必要に応じて私のapp.jsですm Y lectures.ejsファイル:

<div id="lectures-content" class="page-section--small"> 
    <div class="wrapper--no-padding course-lectures"> 
     <div class="course-lectures__lecture flex"> 
      <div class="course-lectures__left"> 
       <div class="text-area"> 
        <div class="text-area__smallheading">Lecture 1</div> 
        <div class="text-area__text text-area__text--small">This is the first lecture</div> 
       </div> 
      </div> 
      <div class="course-lectures__right flex"> 
       <div class="course-lectures__number">Lecture: 1</div> 
       <div class="course-lectures__arrow"> 
        <img class="course-lectures__image" src="/assets/images/icons/link.jpg" alt=""> 
^     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

答えて

0

をごapp.jsが同じディレクトリになければならないことを確認してください役立つことあなたのファイル形式: link.jpg != link.png

+0

男がこのミスをした場合:D –

+0

うわー、私は数時間それを見ていました。私は恥ずかしい :( –

0

はこれを試してみてください:それはあなた

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

は私が不一致があると思う、

+0

私は試しましたが、うまくいきませんでした。私のapp.jsはappディレクトリにあります。 (私の質問に今追加しました) –

関連する問題