I am working on embedded website that will be served by a device running Linux. We are trying to maintain a system where editable items are in root/var/data/.. and static files are in root/opt/..
Right now my server.js is located at root/opt/webapp/server.js, i have an html file at root/opt/webapp/html/file.html
in the file.html i need to render images that are in the root/var/data folder, but my understanding of now this works is node considers localhost at root/opt/webapp(the location of server.js) how do I tag to a file that is outside of said local host but still within the file directory of the device?
I attempted an absolute path but the html just assumed that it should start the chain from localhost so
looks at http://localhost:8080/file:/C:/projects/root/var/data/fms/share/icons/avocado.png
The var folder is two folders up from your .html file, so it sounds like you're looking for either:
../../var/data/fms/share/icons/avocado.png (relative)
/root/var/data/fms/share/icons/avocado.png (root-relative)
It depends on how you're linking to the file, but you may also be able to use the absolute path relative to C::
file:///C:/projects/root/var/data/fms/share/icons/avocado.png
Related
I want the path to the file to look like this: "/assets/style/home.css"
But even though VSCode recognizes this path, and takes me there when I click it, the CSS doesn't appear on the page. It only appears when the path has the two dots: "../assets/style/home.css"
Any ideas on how can I fix this? This is what the entire path looks like:
It's like that with every single path I use in this project, actually. I have to use the two dots for everything.
The "../" means that it is to return a directory, as your HTML file is inside the PAGES directory it is necessary to use the "../".
To call the css file like this "/assets/style/home.css" you need to move the assets folder into the PAGES folder
The "../" before the file path is used to move up one directory level. It seems that the HTML file linking to the CSS file is in a subdirectory and the CSS file is in a directory one level up. If you want to use the path "/assets/style/home.css" the file should be in the same directory as the HTML file or a subdirectory of the HTML file.
You could also consider using absolute path instead of relative path, it would work regardless of where the HTML file is.
Upvote if it helps.
Your code should work if RANDOMWEBSITE is the root folder of the web server.
It will work in VSCode if you open the folder RANDOMWEBSITE, but perhaps your webserver is configured to use a different root folder above your directory.
For example the root folder might be html, and your website is at html/RANDOMWEBSITE/. In this case it would look for the css file in html/assets/style/home.css, rather than html/RANDOMWEBSITE/assets/style/home.css.
Check what the root folder of the webserver is set to and reconfigure, or alternativly remove the RANDOMWEBSITE folder from your folder tree and work within the existing root folder.
You have to do that because .html is isn't "in the same line" as css. You can imagine that it's something like a crossroad if turn right but then you realise that you want to go left firstly you have to go back and than you can turn left. If you want do do "/assets/etc" you need to move you .html file to "randomwebsite/.html"
Please bear with me since I am a noob at html.
Let's say I have a local directory called website saved inside my local Downloads folder, and inside this website directory I have an html file called page.html
Inside the website directory, I also have another directory called folder
Inside the folder directory, I have an html file called page2.html
In the html code for page.html, there is this line of code:
page 2
When I open page.html locally in a web browser, the file path name is file:///Users/myuser/Downloads/website/page.html.
When I then click that page 2 link on the webpage, it brings me to file:///website/folder/page2.html instead of the correct path file:///Users/myuser/Downloads/website/folder/page2.html so it doesn't work.
I know I could change the href link in page.html to file:///Users/myuser/Downloads/website/folder/page2.html but I want this link to work even if I move the website directory into a different local directory. For example, the href link would work whether I have the website directory inside my Downloads, Desktop, or Documents folder, or even if I saved this website directory onto a different PC.
Is there a way to word the href link so that this can happen?
You’ll need to use href="../page.html" in your page2.html file.
I recommend you read up on what a URL is, especially the part Absolute URLs vs relative URLs
So a URL has different parts, beginning with the scheme like file or https.
Image from Mozilla at the before-mentioned URLs
You can skip certain parts at the beginning of a URL, which will give you a relative URL. These parts will be replaced by the user agent (the browser) from the current location.
For example, you can use scheme-relative URLs:
<a href="//myhost.example.com/page.html">
If the page containing that code is served via https, the link will also be completed to https: https://myhost.example.com/page.html. If it’s served via ftp, it will complete to ftp://myhost.example.com/page.html.
The same goes for other parts, and when referencing other pages from the same site, you would use path-relative URLs.
Absolute and relative paths
Now, concerning the path part of a URL, there is also a distinction between absolute paths and relative paths, just like in your operating system.
<a href="/page.html"> is using an absolute path. This means go to the root directory of the same drive or host, to find page.html.
In your case, the page2.html is delivered from file:///Users/myuser/Downloads/website/folder/page2.html.
So when you use a path beginning with / (absolute), it will refer to the root of the drive, so basically C:\ and complete to file:///page.html.
<a href="../page.html"> now is a relative path, relative to the current location. It’s saying go up one directory to find page.html.
So with the same location as before, this will complete to
file:///Users/myuser/Downloads/website/page.html.
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
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.
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.
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.
The physical folder structure on my web server is:
inetpub
oo|
oo|_wwwroot
oooooo|
oooooo|_MyApp ----> this is the root folder of my web application
oooooooooo|
oooooooooo|_images
oooooooooo|
oooooooooo|_styles
oooooooooo|
oooooooooo|_pages
I have an html file (test.html) under the pages folder. I want to link to other files (eg. stylesheets and images) via absolute paths. So, I have a line of code similar to this:
<img src="/images/roundbutton.png" />
When the page is rendered, the image is not displayed, as the "/" tells it to look for the image in a folder wwwroot/images.
Is there another way to use absolute paths to refer to the application root, instead of the site root? Or is using relative paths the only other option?
Yes, use the <base> element.
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.