1

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?

kokosing
  • 5,251
  • 5
  • 37
  • 50

2 Answers2

1

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

imsky
  • 3,239
  • 17
  • 16
  • Thanks for the response, though it didn't help. Is there any documentation or best practices how to use holder.js with node.js with express framework? – kokosing Jun 18 '14 at 15:00
  • It should be straightforward. Please check my other answer. – imsky Jun 18 '14 at 23:49
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')
imsky
  • 3,239
  • 17
  • 16
  • Thank you. I forgot to load the script: script(src='//cdnjs.cloudflare.com/ajax/libs/holder/2.3.1/holder.min.js') I was thinking that having proper path in img data-src is enough. – kokosing Jun 20 '14 at 05:49