Express 不提供来自视图/子文件夹的静态图像

Question

我的静态图像从/views 文件夹和/views/partials 文件夹链接时可以正常工作，但是当我在/views/courses/partials 之间放置一个子文件夹时，我的图像停止工作。

我正在使用

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

如果需要，这是我的app.js

//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 - using bodyparser to easily retrieve 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!");
});

这是我的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>

Answer 1

我认为您图片的文件类型不匹配： link.jpg != link.png

Answer 2

试试这个：它可能对你有帮助

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

确保你的 app.js 必须在同一目录下，