Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Quick Reminder About File Paths

DZone's Guide to

Quick Reminder About File Paths

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Whenever I have a problem with an image "not showing up" on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning that it doesn't start with http://), I pay extra close attention to the relationship of where the file is that is referencing the image, and where that image actually is.

  • Is the image in the same directory as the file referencing it?
  • Is the image in a directory below?
  • Is the image in a directory above?


By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my privative example:

file-path-example1.jpg

Here is all you need to know about relative file paths:

  • Starting with "/" returns to the root directory and starts there
  • Starting with "../" moves one directory backwards and starts there
  • Starting with "../../" moves two directories backwards and starts there (and so on...)
  • To move forward, just start with the first subdirectory and keep moving forward

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}