TrevorBurnham/connect-assets — Issue #77: Bootstrap images not found
Author: hlship
Created: 2012-03-01 17:55:34+00:00
State: open

I'm using Twitter Bootstrap 2.0.1 in my project:

assets
├── bootstrap
│ ├── css
│ │ ├── bootstrap-responsive.css
│ │ ├── bootstrap-responsive.min.css
│ │ ├── bootstrap.css
│ │ └── bootstrap.min.css
│ ├── img
│ │ ├── glyphicons-halflings-white.png
│ │ └── glyphicons-halflings.png
│ └── js
│ ├── bootstrap.js
│ └── bootstrap.min.js
├── css
│ └── style.css
└── js
├── backbone.js
├── jquery-1.7.1.js
└── underscore.js

I reference the bootstrap in my layout:

!= css("/bootstrap/css/bootstrap")

And most of bootstrap works fine ... except I see warnings in my console:

09:33:35 web.1 | Can't resolve image path: ../img/glyphicons-halflings.png
09:33:35 web.1 | Can't resolve image path: ../img/glyphicons-halflings-white.png

And, viewing the source of the bootstrap.css (both production and development), it doesn't appear to have rewritten the url entries in bootstrap.css

I attempted to fix this by creating a public folder and moving the bootstrap images there:

public
└── bootstrap
└── img
├── glyphicons-halflings-white.png
└── glyphicons-halflings.png

I stil get the warnings, but http://localhost:5000/bootstrap/img/glyphicons-halflings.png returns the image, and produces the correct output ... so it's working.

However, I don't think I should have needed to split up my bootstrap folder, and I did expect (based on the documentation) to see the CSS rewritten to reference the image files using an md5-extended URL, and for the image files themselves to be accessed using an md5-extended URL.

I've tried swapping the order of middleware:

app.use require("connect-assets")()
app.use express.static "#{__dirname}/public"

... but neither static first nor connect-assets first seems to affect the behavior