I am working with a web site that uses absolute paths to files but does not specify a domain. A link to /public_html/images/image1.jpg is coded as "/images/image1.jpg", a link to the home page is coded simply as "/". This is done so that the site can be deployed and maintained on multiple domains.
The problem I'm having is with testing the HTML files by opening them on a PC. Because the base location is coded as "/", the browser assumes all the files and directories are in the root of the C drive.
Is there a way to simulate the site on a Windows PC so that all images and CSS are loaded correctly? I thought about creating a new partition and putting everything in the root of that partition but wanted to know if there was an easier way.
Related
I originally transferred this project from windows to linux, and it was working completely fine on windows, but now images are not loading.
I have an image:
<img src="/assets/s1.png" alt="dinosaur">
And it is only loading on the webpage if I change the filepath to /home/user/Desktop/Project/assets/s1.png
The image file is in the folder assets and the assets folder and html file are both within the Project folder.
The weird thing is that when I change /home/user/Desktop/Project/assets/s1.png to /Desktop/Project/assets/s1.png it stops working. I would like to be able to only include the necessary path /assets/s1.png because I will need the path to stay the same if this project gets moved around between environments.
Based on a comment on the question:
the address of the page is file:///home/user/Desktop/Project/file.tpl
That's the problem then. The "root" of the "web server" (from the browser's perspective) is the root of the file system. So this absolute path won't work:
<img src="/assets/s1.png" alt="dinosaur">
But this one will:
<img src="/home/user/Desktop/Project/assets/s1.png" alt="dinosaur">
However, that latter one clearly won't be helpful in a web-hosted environment.
You can instead use a relative path, for example:
<img src="./assets/s1.png" alt="dinosaur">
This should work in the example given, but we can't know if this will have further implications in a larger and more complex web application. For example, if you're dynamically loading sections or templates from different folders, their "relative paths" may be different. (That's one advantage of absolute paths, they're the same regardless of what page you're on.)
But more to the root cause of the problem... You really shouldn't be testing a web page from the file system. The intent is to host it on a web server, so the testing should be hosted on a web server.
It makes little sense to make changes to the code in order to get it to work in an environment that will never be used, only to probably have to make more changes to get it to work in the actual target environment. Keep the test environment and the target environment as similar as possible.
What is the correct way to do this and have what is generated / used by the browser be relative paths?
I need to do this in order to generate PDF's with links that will open files in a folder directory on a user's hard drive. The links must use relative paths, since the files will be downloaded in a directory structure that will be moved around on the hard drive. To further clarify the use case, the PDF(s) and the files will be downloaded in zip archives together, so the initial relative location will always be known.
I understand there are things in place in browsers to prevent this working from within a browser window, but in this case it will only be used in anchors in PDF files generated from HTML.
One of the problems with using something like this is that the protocol and domain is appended to the front of the path in the anchor. The relative path that's needed is to navigate within a folder directory in Windows Expolorer.
file.txt
The PDF's are converted from HTML using SelectPdf, and this is an Asp.Net MVC web app.
I have tried variations of this, which windows explorer is not able to use:
file.txt
All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server，every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.
I have a small problem that concerns an outsourced website development company who will not (for perfectly normal and valid reason) allow us access to the server to alter stylesheets. I've been tasked to redesign a website layout. Problem is, I cannot access the website nor a dev environment to alter the stylesheets to bring forth these ideas. Only route to this would be to create a local custom.css to send via email to the person who uploads them. However, I cannot in good faith just throw them a CSS file to be applied on a live site without fully cross-browser checking it and I cannot do this locally on IE, Safari or Opera.
One solution was to save the website locally as HTML (file, save as...) but the problem is the background CMS is complete crap, meaning it has like 200 completely unnescessary CSS files and it is organized as:
main.css has 7 #import rules with relative paths.
Inside this is another stylesheet with 16 #import rules with relative paths.
Inside this... You get the picture.
This would mean I would have to shift through these 200 import rules and files to download them manually via the address bar. So my question is:
How can I save this website as HTML to my computer to apply a custom user stylesheet file to it so I can cross-browser test it properly? Is there some website that can go through a site and compress all the CSS to one file or smth?
You can download a whole website with dependencies using programs like HTTrack
http://www.httrack.com/
It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site's relative link-structure. Simply open a page of the "mirrored" website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.
WinHTTrack is the Windows 2000/XP/Vista/Seven release of HTTrack, and WebHTTrack the Linux/Unix/BSD release.
It doesn't consolidate all the CSS files into one, but it is better to retain the files as-is if you want to minimize changes
I have a static html website in a folder on Windows XP. If I open the file directly from its location, the page loads in a browser, but none of the relative links work. They all want to be relative to localhost, not the directory they're in.
I can drop the project in IIS and it works fine, but I'd like to be able to skip that step and just browse the project without needing a server.
But my question is simply this: is there something I can do so I can view the website locally, through a browser, without a server?
Thanks.
<base> Defines the base URL or target for all relative links.
It goes in the <head> tag.
It can also be useful for developers who build websites in one location (dev) that will ultimately be placed in another location (prod).
<base href="http://myfolder/test/">
There is some discussion -- and some more examples for you -- in this SO question.