Is it feasible to use a local image in Stylus and Node.js and Express?

Question

Here's the situation: I would like to use an image in my Web app, and in my Stylus file (style.styl), I can use the following code to set the image:

.background
    background: url(http://path/to/image)

However, is it feasible to save the image to my local app directory, and use it from within the directory?

My directory structure is like the follows:

app.js
package.json
public
    css
        style.styl
    js
    images
        image.png
views
routes

And I want to use the image from within the style.styl file, which then is parsed and used in my app when someone accesses the specific routing in my app.

However, the following code doesn't work at all:

.background
    background: url(../images/image.png)

Also the following code doesn't work

.background
    background: url(./public/images/image.png)

So, how can I use the image in my app from within the local directory?

I got this page but I cannot understand everything there at all. Especially, where should I write the code on the page? It looks like it's not assumed to be written in style.styl, which is just a stylus file as far as I know and not a JavaScript file. Also, what should I write in the callback function?

And when I wrote the above code in my app.js, then I got an error: str is not defined, since the stylus(str) implies that I define a str object, which I don't. So I'm not sure what it does at all...

I use my Stylus file in ./public/css/ directory, and I write app.use(require("stylus").middleware(path.join(__dirname, "public"))); in my app.js. Also, I use Express 3.5.1.

Answer 1

This might be helpful (from http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c44a.html - please don't use dreamweaver):

There are three types of link paths:

Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).

Document-relative paths (such as dreamweaver/contents.html).

Site root–relative paths (such as /support/dreamweaver/contents.html). 

In express.js apps the public folder acts as the site root directory.