I'm completely new to XAMPP, and don't know much more than HTML and CSS. I've put my website into a subfolder in htdocs called test. In my HTML, I have relative links that look like /test/path/to/image.jpg.
I was planning on uploading the subfolder test to a server using FTP. My question is, will I encounter any problems because of the way I have my links formatted? When my website is live, I'd like for the URL to look more like example.com/path/to/image.jpg rather than example.com/test/path/to/image.jpg. Is it better to use ../ to define my paths instead?
I've seen some similar questions that required people to use the .htaccess file, but I can't find that/don't know how to use it. Again, sorry for my total lack of knowledge on this; I'd be super grateful for any help.
/test/path/to/image.jpg
Isn't a relative path/link - it is absolute, meaning the web server would try to serve the file from http://www.example.com/test/path/to/image.jpg. If you would like that file to be served using a relative URL, you should use:
path/to/image.jpg
Which will serve the file relative to the page that is requesting it. If the requesting page is in the test directory, and document root is the test directory, the server would deliver http://www.example.com/path/to/image.jpg.
Related
So I'm trying to access my root directory in HTML but when I use / it is not working. So for example I'm trying to get my navigation css by doing:
<link rel="stylesheet" href="/nav.css">
The weird thing is, it works perfectly fine when I am using VS Code with the live server extension, but I just recently noticed when I run the index.html file alone none of the links starting with the / work. I know this is the issue too, because when I take away the / in the above line, it works perfectly fine again (only for the homepage page in the root directory already).
As Quentin points out, if you're loading the index.html file locally without a server, the root directory will be the root of your file system. If your requirement is for the index.html file to work locally on your professor's machine without a web server, you should use relative paths.
In order to traverse back up your file system from the current file, you can use paths that start with ../
when I run the index.html file alone none of the links starting with the / work
If you are running index.html alone then the links starting with / will be relative to the root of your file system.
The browser doesn't (and can't) know which directory represents the root of your web site project.
Use a web server. Load the data over HTTP.
Try this:
./nav.css
It (I mean, ./) loads files in the same directory of index.html, same as nav.css. With VS Code, I bet ./nav.css should work for the live preview too: using an external HTTP server (such as http-server on Node.js) helps, because it takes the current directory (where index.html is) as the root and you can easily reach /nav.css. Without a live server, the relative path could be reached as I said with ./nav.css (a typical *NIX path) or simply nav.css without slashes on Windows.
As others have indicated then the reason it's not working is because by loading the file directly you are now loading it as a local file rather than a file on website, and thus your URL base (Your /) is now referring to the root of your local file system. Which would likely be C:\ on a windows system or your actual root / on a *nix system.
To actually solve your issue I would suggest one of the following solutions:
Just always run the project over HTTP through a server.
Go through your project and change all of your paths to be relative paths. You might be able to use a find replace in your editor to do this.
Use a <base> tag to specify what the base href of your web page should be.
If you can't use a server and just have a single HTML file then it might be quickest to use fix 3. You can probably get away with using <base href="."> to make the base the current directory of your index.html file which, I suspect, will be a drop in solution to make things work as they did before.
In future best consider this and how you are going to run the file, and what your URLs are going to be relative to. It's a wrinkle that can be easily missed nowadays that the tools we use in development are so good at hiding the details of how websites are actually deployed.
I don't think <base> is a good idea.
It will change the base href in the whole page, which might cause problems when using other links or section navigation.
i'm new in using hosting, i have a question about a FTP, why if i upload something (for example a image) to my server i cannot see it from the browser using the directory for example (http://www.mywebsite.com/public_html/images/backgrounds/background.png) if i use that address i get a fil with a "?" sign instead of the image. the only way to see the image is changing http by ftp for example,(ftp://ftp.mywebsite.com/public_html/images/backgrounds/background.png)
please how to find the files with http instead of ftp, to be able to use it in my web page using html
thank you
Typically, the publichtml folder is the root of your domain, which is to say that http://www.mywebsite.com/ points to your/relative/path/to/publichtml/
Using your example of putting a file at /publichtml/images/backgrounds/background.png would mean it should be accessible at http://www.mywebsite.com/images/backgrounds/background.png
Similarly, if you put filename.html in the /publichtml/ folder of your server, you should be able to access it at http://www.mywebsite.com/filename.html - If you put it in a subfolder of /publichtml/, say, at publichtml/example/, it should be accessible at http://www.mywebsite.com/example/filename.html
This can very from one server to another, but in most situations, this is common practice.
Edit: broken formatting.
I deployed my static HTML website to Heroku using this tutorial (http://www.lemiffe.com/how-to-deploy-a-static-page-to-heroku-the-easy-way/) and my pictures won't show up ? It works perfect locally so I don't really understand why it doesn't when it's deployed on Heroku ?
I've also looked up every other solution that stackoverflow has to offer and nothing worked for me. Any help is really appreciated
Here is the order of my folders/files (folders are capitalized):
-RESUMEAPPCOPY
-home.html
-portfolio.html
-index.php
-aboutme.html
-PUBLIC
-IMG
-JS
-CSS
Code for image:
<img src="/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
Whenever I inspect the element on Heroku it says :
Failed to load resource: the server responded with a status of 404 (Not Found)
and where the picture is supposed to be I have the typical broken image link picture
Your <img> tag is pointing to an absolute path that exists on your local filesystem, but does not exist for your Heroku app. Instead, provide a relative path (relative to the HTML file invoking the <img> tag, that is) to your image asset, commit the change to version control, then redeploy to Heroku.
Assuming that your public directory is actually nested within the resumeappcopy directory, the following path should work:
<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
UPDATE:
Note that the cited asset URL points to an asset with the file extension PNG in uppercase. However, the file's actual file extension is png – in lowercase (see here). Your local filesystem is probably insensitive to case when looking up a resource – but Heroku is not. You'll need to ensure that you're properly invoking the correct casing for resources when you deploy to Heroku.
I had the same problem and found the problem to be the capitalized file type ('.PNG'). I believe Heroku is searching for files without any .toLowerCase() function applied. Which means you must request an exact match between your markup and your file with capitalization being important.
This wasn't a problem on my local node / express server but became an issue after deploying to Heroku. Some of my images were showing up but others were getting 404 errors (i.e. the ones with capitalized file types). The smart thing to do is to always make your file types are lower case.
I changed this:
<img src="public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
To this:
<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
I hope this helps anybody that came across this issue as it confused me for at least an hour. Good luck!
You are giving an absolute path to the image:
/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG
The image works locally, but cause this directory exists on your local machine; it does not exist on Heroku.
You need to use a path that is relative to the directory being served by Heroku / your server:
/../PUBLIC/img/PennUnitedWebsite.PNG
(this assumes that your link exists in an HTML file in the RESUMEAPPCOPY directory)
The only answer that hits the nail right on the head: Heroku is case-sensitive!
Took me half a day to figure that out!
Well , whenever your Web-page's contain HTML, CSS and JavaScript , so follow just 2 steps :
1) Make one file give name as index.html (keep evreything in it) ex:script,stylesheet & body.
2) Now, change these file, copy and paste these same file but change domain to index.php
Then deploy on a Heroku , Keep your images downloaded in one folder with index.html
Hence this method will help you to deploy your Web-Pages
In summary, to properly load the images:
1) Use relative url path relative to index.html
2) image file extension needs to be png instead of jpg, and write it in lower case, eg: "cat.png"
Heroku is case sensitive with images so make sure all your images are set to lowercase names.
Referencing from the frontend view "catPicture.png" won't work but "catpicture.png" will work. It's a big quirk! Took me hours to solve this.
If the image has a large size it will not load on the Heroku on a free version.
You can resize the image in an image editor (ie: paint) to reduce the size but it will also reduce quality.
Then push by the following commands
git add .
git commit -m "resize"
git push heroku master
It should work 👍👍
I had the same problem: case-sensitive png files. But to fix the issue I suggest lowerCasing them AND changing the name of the image file. This way you can be safe (and more organized in your versions) when you commit them to git and push to heroku
I had the same problem.
change the jpg image file to png.
worked for me
I had similar problem recently on Windows OS. Pictures loaded properly when tested localy, but on heroku some of the pictures were loading while others where not. And pictures were in the same folder! My paths and script were correct, but as others mentioned it was a case-sensitivity problem. I renamed the files, uploaded again but it didn't help. Why? Because changing the letter case is not recognized as real change for git on windows. To properly load newly named files i did those steps (all commands can be found at heroku tutorial pages):
Destroy heroku app and make a new one
Delete .git folder from your directory
Create new git remote for your app
Push all your files again
This way, heroku files will have names of files the way you like. Worked for me.
On my webpages, I typically have something like this:
<link rel='stylesheet' href='/global.css'/>
However, the problem with that is if I am testing my website on my computer, I will store it in a folder like C:/Websites/My Websites/ (for example). The problem is that when I test it locally, /global.css points to C:/global.css, because the root is the C drive.
Is there a way to manually override this root so I can test my webpages locally? If so, how? If not, is there any other way to enable me to test these pages locally?
Not sensibly.
Just install a web server on your development machine (and test via http://localhost). This will also be useful when you need to develop server side code.
try 'global.css' without the slash at the beginning. It will point to the directory you are in at the time.
EDIT: There seems to be some confusion:
you can traverse directories using something like 'cssFile/global.css.'
Also, you can use *../global.css' to traverse upwards.
That should help you find the file you need.
Still, i agree that using a local server is the right way to go.
You need to use relative paths. So if both the HTML and the referenced CSS file live in C:/Websites/My Websites/, you'd use global.css or ./global.css.
Alternatively, you can run a local web server and set its document root to C:/Websites/My Websites/. You can then reference any linked resources (inter-site links and paths to images, CSS and JS) with the absolute path notation, e.g. /global.css, /images/something.png, /scripts/foo/bar.js. The advantage of using absolute paths is that you don't have to change the paths to resources in an HTML file if you move the HTML file up or down in the folder hierarchy.
For quick and easy local testing of static sites (plain HTML/CSS/JavaScript), I'd recommend mongoose. It's a tiny exe that doesn't need installation, just drop it anywhere, tell it what your document root directory should be, and you can get going.
For more fully-featured development environments (Apache server, PHP, databases), look at WAMP, XAMPP or Uniform Server.
Just started a site and I have an /img directory on the main domain. I would like to set up a subdomain(where the file folder is just another one in the main directory) that is able to use the /img folder, but it doesn't work.
The /img and /subdomain folders are on the same level, so to display images in the main domain I type: <img src="img/image.jpg">
and for the /subdomain I type: <img src="../img/image.jpg">
and I get a 404 error for the site: http://subdomain.example.com/img/image.jpg As you can see, I want it to be linking to http://www.example.com/img/image.jpg
Can anyone tell me how to achieve this? I would prefer not to link images to their internet directory (i.e. http://www...) because I would like to modify the sites on my computer and upload them via ftp to my site hosted by bluehost.com.
I'm sure it's just something that I am messing up or don't completely understand. Thanks in advance!
In your folder structure on your web server, create a symbolic link /subdomain/img pointing to the target /img.
In linux, this can be done by:
cd /your_web_folder/subdomain
ln /your_web_folder/img img -s
Do not use subdomains for asset management. From an enterprise perspective you will end up with hundreds of subdomains and have no idea what each represents. I know this must sound absurd, but I have seen it happen.
I would strongly recommend using a well thought out directory structure that balances asset types against versioning information. I would also recommend using a content distribution system, such as the edgesuite networks.