javascript - 图像未使用 Jade 渲染

Question

我有一个简单的 Web 应用程序，其中包含主 js 文件和代表主页的 Jade 文件。 JS 文件如下所示:

var express = require('express');
var path = require('path');

var app = new express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.get('/', function (req, res) {
    res.render('character', {
        exp : 0,
        requiredExp : 0,
        coins : 0,
        frames : [
            'bronze_frame',
            'silver_frame',
            'golden_frame',
            'jade_frame',
            'conduit_frame',
            'tempest_frame'
        ],
        badges : [
            'night_edge_badge',
            'arcanum_badge'
        ]
    });
});

app.listen(25555);

Jade 文件如下:

doctype html
html
    head
        title= title
        //link(href="./css/character.css", rel="stylesheet", type="text/css")
    body
        div
            img(src="./assets/wizard.png")
            progress(value=exp, max=requiredExp)
        div
            img(src="./assets/coin.png")
            p= coins
        div.showcase
            for frame in frames
                img(src='/assets/#{frame}.png')
        div.showcase
            for badge in badges
                image(src='/assets/#{badge}.png')

当我运行 JS 文件并尝试连接到它时，我得到:

jade 文件位于“view”文件夹中，“assets”文件夹也位于“view”文件夹中。那么为什么不绘制图像呢？我需要一个解释，如果可能的话，需要问题的解决方案。

Answer 1

您应该告诉 Express 使用 static 中间件来提供静态内容(css、js、jpg...):

var express = require('express');
var path = require('path');

var app = new express();
app.use(express.static(path.join(__dirname, 'views')));

更多信息请参见 express documentation .

此外，请确保您的资源路径一致:是 ./assets 还是 /assets ？

img(src="./assets/coin.png")
div.showcase
    for frame in frames
        img(src='/assets/#{frame}.png')