Question

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.

Answer 1

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.