Sorry if this is a stupid question...
I've developed an application that creates absolute links by prepending urls with the site root (of whichever site it is hosted).
For example:
<link rel="stylesheet" href="<?=SITE_ROOT?>/assets/css/global.css">
Notice that a slash is coming after site root. I need to convert this now to be relative links, so I tried using a dot as the value of SITE_ROOT.
This creates this:
<link rel="stylesheet" href="./assets/css/global.css">
As far as I can tell, it works fine. Is this a legitimate relative link? Or is there a reason why I shouldn't do it this way?
Note: I'm not trying to go up a directory, otherwise I would use ../ I'm simply trying to stay in the same directory. Since there is a slash after SITE_ROOT, I can't leave it blank or it would become a root relative link.
Update: Will this work with IIS?
These links work on the client, not on the server, and as far as I know should behave the same as <a> links. ./assets/css/global.css is the same as assets/css/global.css, meaning the folder assets under the current sub site. the ./ part is redundant.
If you what a link relative to the server you should start it with a slash, ie: /assets/css/global.css will go to stackoverflow.com/assets/css/global.css, even when you are on a sub site.
I think it's fine.
I think it's client side, so it should work with ASP.Net.
its legitimate.
Just check if this works with IIS server. IMO it should. It does with Apache.
jrh
Related
I was making a new path for pages on my site and was trying to figure out how to path to my stylesheet and images cleanly. Here's an element that shows my problem:
<link rel="stylesheet" href="/src/styles.css">
My local copy of my site is hosted here at "E:/Documents/WEBSITE", the local page I'm trying to link the stylesheet from is "file:///E:/Documents/WEBSITE/things/weapons.html", and the stylesheet is at "E:/Documents/WEBSITE/src/styles.css". I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet. When I upload a version of the site that has the same path, it works correctly.
I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet.
I've looked over the code and made sure it would(and does) work otherwise. Like I said, it works when on the live site.
I've placed dummy "src" folders with "styles.css" in them on my base E drive, my Documents folder, and even in the "things" folder itself. If the href were pulling from any one of these, there would be an obvious change to the local site, but none of them are pulled from with that path.
When I upload a version of the site that has the same path, it works correctly. The same happens with some elements that I tried this with the src on. It simply will not work locally. The only other thing I can possibly think of is that it has a problem with the "file://" at the beginning, but I can't imagine how I would troubleshoot or avoid that. I get no errors logged.
I really can't include a reproducible example of code, but what I've done that works locally and on a live site:
<link rel="stylesheet" href="../src/styles.css">
and to reiterate, this doesn't work locally, but it works on a live site:
<link rel="stylesheet" href="/src/styles.css">
And just to clarify at the end here, the path is working when the site is live, but not locally. Not the other way around.
href="/src/styles.css" is an absolute path, not a relative one.
From file:///E:/Documents/WEBSITE/things/weapons.html it maps to something like file:///E:/src/styles.css (I think Windows file paths preserve the drive, but I'm not certain).
The browser has no way of knowing that you want file:///E:/Documents/WEBSITE/ to be the root directory of the site. The root is determined by stripping all the path information off the URL, not just parts of the path.
Absolute paths are, generally, not suitable for links used on a local file system.
Use an HTTP server. There are many free ones you can use for testing. VS Code has an extension called Live Server that makes it easy to run one.
Something is wrong. When I open my site using localhost then everything is fine. What can be wrong here?
And when I click assets/css/style.css I got error like this:
When ew check Network tab, and click on style.css sotmething weird happens because html file is previewed:
As myself and Quentin mentioned in the comments, it is generally good practice (and the intended effect for most situations) to use /assets/path/to/resource instead of the relative path assets/path/to/resource.
Unless it is intended to leave out that slash (which it isn't in your case, as you said in the comments), you'll need to prefix all the asset links with slashes.
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/scregal.css">
etc.
There is only one possible causes of the problem I know although your question is not so clear.
1.》 Make sure the assets folder is in the same location as your html file.
》Prefix all your href link with a dot. Check the image to see
I faced a problem like this when I wanted to push one of my electron apps to production mode. The dot makes it easy for the packager to load the whole folder.
I have inherited a website where the previous developer has coded all links relative to the site root, with a leading backslash in each link:
<link href="/css/file.css" />
<script src="/js/file.js"></script>
This works great for when the site is hosted on a server, as the links will equate to:
http://www.example.com/css/file.css
http://www.example.com/js/file.js
However, I'm trying to get these links to work correctly when called from within a subfolder for local testing. Specifically, I'm using WAMP, and have moved the entire code to a local folder called site at http://localhost:8080/site/.
I can't use the root of localhost, as WAMP stores various files there (including an index that would get overwritten).
The obvious solution, as many posts here on StackOverflow suggest, is to simply use folder-relative links, such as:
<link href="css/file.css" />
<script src="js/file.js"></script>
However, there are literally hundreds of hard-coded root-relative links in various different files, so it would be great having to avoid altering every single one of them if possible.
To avoid having to edit every link, I've tried setting an HTML <base> tag and specifying the folder directly:
<base href="http://localhost:8080/site/">
However, this doesn't seem to work.
Is <base> incompatible with root-relative links?
Is there any way I can easily have all files reference http://localhost:8080/site/ without having to manually edit each one of their preexisting root-relative links? Or will I have to manually update each one to be folder-relative?
Is <base> incompatible with root-relative links?
No, but an absolute path is still an absolute path. It will resolve relative to http://localhost:8080/site/ by dropping /site/.
If you want to use absolute paths and not keep your development sites in subdirectories, then configure your HTTP server to use Virtual Name Hosting.
Add custom hostnames (either in the DNS server for your LAN or in the hosts file on your development system), such as site.localhost, and set the DocumentRoot in a virtual host.
Have you tried using the replace function in your IDE? You can simply replace all the ="/ with =". It'll save you a lot of work and stress.
I serve content from a subdirectory on my web server, for example:
http://www.myserver.com/subtree
I notice that the CSS is not rendering correctly, so I look at the source of the HTML file:
<link rel="stylesheet" type="text/css" href="static/stylesheets/style.css"/>
One would expect that browsers such as Chrome or Firefox attempt to find this css at
http://www.myserver.com/subtree/static/stylesheets/style.css
When hovering over the link, I can see that it links me to
http://www.myserver.com/static/stylesheets/style.css
It may be useful to note that I'm using apache's mod_proxy to serve the content from /subtree from another server running on the local machine. However, my reasoning is that the browser doesn't know about this and it looks like the content is coming from myserver.com/subtree so therefore it should look for the resources using the relative path.
What am I missing?
That's to be expected. The browser cannot know that /subtree is a folder (instead, it could also be just a file served as text/html). If you want the browser to include this path fragment in relative path lookups, make sure that it ends with as slash, as in:
http://www.myserver.com/subtree/
If you are using Apache, you can use mod_dir's DirectorySlash directive to automatically fix this for you: mod_dir documentation
I hope this help:
Browsers when see URLs which start with /, they remove the path part of the document.location.href, or get the value of document.location.origin and append the current URL to the end of it.
When they see URLs which don't start with '/', they append the current URL to the end of document.location.pathname.
From a comment by Sam Dufel on the question:
I've noticed that with friendly URLs,
browsers will often look in a
different relative path depending on
whether or not you include a trailing
slash. I.E,
http://www.myserver.com/subtree would
have a relative root of
http://www.myserver.com/, and
http://www.myserver.com/subtree/ would
have a relative root of
http://www.myserver.com/subtree/
(here so you can mark this question as answered)
So I just finished working on a site on my computer, and I put it on a flash drive and put it in my public_html folder on my server. When I type in http://localhost/ I get my index page but the css is gone and all the images are gone.
How can I fix this?
Sorry, this question is from years ago. For those interested, the problem was due to permissions on my server.
Ensure that you have put the right path for your css and images.
Make sure that inside your html, the path to your css is correct.
link rel="stylesheet" type="text/css" href="mystyle.css"
Your href="mystyle.css" should have a correct reference by using ..(dot-dot) just like "../folderName" in case your css file is one or more directory away from you main folder.
Sometimes all that you need to do is clear your browsers cache, which will store the pages current state and will sometimes ignore any new changes to the css and sometimes even images until the cache is cleared.