在带有快速Web框架的node.js上使用holder.js可以正常工作

时间:2014-06-17 20:33:48

标签: node.js twitter-bootstrap express pug holder.js

我使用带有快速Web框架的node.js和jade模板解析器。

我正在关注bootstrap示例并遇到holder.js。

的问题

我已将holder.js脚本放入静态文件(公共目录),在app.js中有以下内容:

app.use(express.static(path.join(__dirname, 'public')));

我想在jade模板中显示以下代码的一些图像:

img(data-src='/holder.js/500x500/auto')

它不起作用。我检查了浏览器,我能够正确查看holder.js文件,但添加任何参数都会导致显示主页面。

我怀疑静态文件处理程序认为没有holder / 500x500 / auto这样的文件并重定向到主页面。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

data-src属性中取出前导斜杠:holder.js/500x500/auto

答案 1 :(得分:1)

这是一个带Express和Jade的Runnable,带有几个Holder占位符:http://runnable.com/U6IlNqsTu-cR6ZT8/holder-js-in-express-using-jade-for-node-js-and-hello-world

两个占位符使用不同的主题,其中一个使用auto标记。

server.js

var express = require('express')
var app = express();
app.set('view engine', 'jade')

app.get('/', function(req, res){
  res.render('index')
  })

var server = app.listen(80, function(){})

views/index.jade

doctype html
html
  body
    script(src='//cdnjs.cloudflare.com/ajax/libs/holder/2.3.1/holder.min.js')
    img(data-src='holder.js/200x200/lava/auto')
    img(data-src='holder.js/200x200/sky')