Correctly using relative path in image file - html

Question

From the very start of my development career one thing that has kept confusing me is relative and absolute paths.
Now I understand it in the way of URLs and that if you are going to a webpage on the same server you use the relative path and if the page is on a different (external) server then you will need to use the absolute path i.e. http://www.google.com. But I never understood it in the way of files.
Example and my problem.
I am building a HTML email class that will send a image as a img as a banner
builder.AppendLine("<img src=C:\Images\\MailBanner.jpg\" alt=\"banner\">");
Now if I use the absolute path like above, the image will display.
However, when I deploy the site onto our web server, then of course, the image is not in the C: Drive so the image doesn't appear in the email. So where do I need to put the \..\ in the source?
Is it as the point where the image is stored on the web server in the project?
I guessing you may need some more information then I have posted but I may need some explanation really.
Thanks

Answer 1

Just put images in a folder images under your project folder then your code will be:
builder.AppendLine("<img src=\"\images\MailBanner.jpg\" alt=\"banner\">");
And your image path is:
/project/images/MailBanner.jpg
And your project is normally under the www folder of your web server folder.

Answer 2

Set up an images folder in your project and fix your src attribute:
builder.AppendLine('<img src="images/mailbanner.jpg" alt="banner">');
EDIT: your problem here is your javascript code. You need to use an Apostrophe before and after your tag and quotation marks for your attributes of the img tag. Otherwise your javascript cant understand which your attributes are.

Answer 3

I prefer to mostly use relative paths, because when you move the data from a local location to a web server, as long as the directory structure doesn't change nothing will break. But, the OS also matters.
For instance, I can see that your file was moved from a windows server. So unless you moved it to another windows server and the drive letter is the same, your absolute path is broken.
If the file was moved to a windows server with the exact same directory structure:
builder.AppendLine('<img src="C:\Images\MailBanner.jpg" alt="banner">');
If the file was moved to a linux server:
www/images
builder.AppendLine('<img src="/Images/MailBanner.jpg" alt="banner">');
NOTE: The first forward slash is very important. The / tells Apache that the directory is located in the document root (www). Without the /, Apache expects the directory to be in the current directory where the file/script is located. Another important consideration when moving files from Windows to Linux is that Linux is case sensitive. /Images/MailBanner.jpg is not the same as images/mailbanner.jpg.