I've got an express.js app currently using ejs (using jade for newer projects) and I'm trying to solve a problem in a clean and appropriate manner.
I've got a layout.ejs file with my header and footer in it. Most of my site so far has been one layer deep http://innovationbound.com/about or /services or /amy and so on....
I'm beginning to created online courses at http://innovationbound.com/courses/course-name and the issue I'm having is that these course pages can't reference the images the same way. <img src="images/linknedin.png" alt="LinkedIn Icon"> for instance.
From the course-name page it tries <img src="courses/images/LinkedIn.png" alt="LinkedIn Icon"> and obviously can't grab the image there.
Is there a setting in express, or something obvious I'm missing? I hope I don't have to use absolute urls, that just makes developing on the local machine insane.
Just use site root–relative paths. For example <img src="/images/linknedin.png" alt="LinkedIn Icon">. Note the / makes the difference.
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).
From Adobe.
You might consider it, but you can use "../images/link(n?)edin.png". However, I'd recommend to use absolute path, because images should be stored in /public (in general jade setup) and your path depth could be varied by your route rule.
As a tip, if you lost in relative path of image, right click on broken image and see a URL in properties on web browser. It'll give you a hint of where the image is.