Using holder.js on node.js with express web framework does work

Question

I am using node.js with express web framework and with jade template parser.

I am following the bootstrap examples and have problems with holder.js.

I have put holder.js script into static files (public directory), having in app.js the following:

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

I wanted to display some images with following code in jade template:

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

And it does not work. I checked through the browser and I am able to see holder.js file correctly, but adding any parameters is causing that main page is displayed instead.

I am suspecting that static files handler thinks that there is no such file as holder/500x500/auto and redirects to main page. How can I fix that?

Answer 1

Here is a Runnable with Express and Jade with a couple of Holder placeholders: http://runnable.com/U6IlNqsTu-cR6ZT8/holder-js-in-express-using-jade-for-node-js-and-hello-world

The two placeholders use different themes, with one using the auto flag.

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')

Answer 2

Take the leading slash out of the data-src attribute: holder.js/500x500/auto.