I have been getting to grips with html for the past two days. I understand how internal links work perfectly fine. The problem is getting the path to correctly redirect to the main page. The reason I ask, is I have looked all over and it's implicitly stated that "../index.html" (specifically the '../') will look to the previous folder.
It keeps telling me file not found. I even tried using the complete root path and it still won't work. Maybe this is slightly different on Mac? As I also can't get my .jpg files to show properly. My image files are located in the same folder as index.html.
Mac OS X 10.9.5
EDIT: Something strange, look at what the file path is showing in the browser.
file path
Related
My intellij can't recognise path to images and other files but when i use ctlr+left mb it finds file or image without problem. Im working with other ppl and we share it on github and only i have this problem. When i run application web pages are completely fine but when im trying to just view html file it doesnt recognise css and images. I tried creating project again, clearing cache and reinstalling ide. Photo shows files in project
how files are structured
EDIT:
Im trying to view html file clicking this and that is the result. Css and images are missing even though path seems to be correct. Problem occures on my computer. Program works on my teammate pc
I have come into an issue where my webpage will not load a background image in any browser if I open it directly into the browser, but if I open it up via a live server addon for VS code it works entirely fine and loads everything correctly. I have videos attatched to the webpage which load entirely fine in both scenarios, and have come to a bit of a deadend...
file's to see if file pathing is incorrect
Where the image should be loaded
The html file calling the class
This is a guess at the moment but it might be, on the second image that you posted, that you have detailed ../../ twice. This is telling the path to back up by two folders then look for the assets folder.
Looking at your file layout. You have an index page then an assets folder which contains a videos folder which contains the image.
You shouldn't need to back up out of the folders using any itteration of ../ from where you index page is located. The correct path might simply be assets/videos/cover_image.jpg
I have been getting this weird problem where, when I upload a new CSS file to the public_html folder in cPanel, it is not updating on the website.
Whats really weird about it was that I uploaded the entire website again. Every html file, every folder, everything. And when I checked the CSS file it was the updated version, but the browser was somehow reading the old one.
To fix this issue I had to change the name of the CSS file (in all of the html files too because without it they were still using the old one even tho it was nowhere in the folder) and re upload the whole website again.
So, am I missing something here? Is this supposed to happen? Or is this actually weird and shouldn't happen at all?
I've also run into this problem. It seems to be a caching issue. Trying this person's trick is how I narrowed it down to being a caching issue:
https://www.sitepoint.com/community/t/css-html-files-updating-on-cpanel-but-not-on-website/271683/5
Smells like cache to me.
If your recent changes are NOT there, then play a trick on the URL by changing the path a little. For example if the path was /themes/mytheme/assets/custom.css or whatever it is, change the version and do something like /themes/mythemes/assets/custom.css?v=1234567
By changing the URL in this way, it would bypass any kind of cache that would be looking for the previous URL. In other words, you should now see your correct CSS file.
The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.
I have a website hosted by Github and I am having issues with displaying pictures. I recently tried to upload new pictures but despite the path being right, the page fails to load the images and gives a 404 error in the source as it tries to find the path. Here is the repo of my site: https://github.com/jeanturban/jeanturban.github.io
I think it might have something to do with Picasa as when I download a picture from the internet and update the path accordingly it works fine. But when I try to use pictures from my computer, or if I try to export from Picasa to my "img" folder, then it breaks. Perhaps Picasa is making a hidden folder upon exporting the pictures that is not being uploaded? Anyone have any insight on this? Or a workaround?
It looks like your images are not loading due to the wrong file extension. You are trying to load "http://jeanturban.com/img/Current/light1.jpg" when it should be "http://jeanturban.com/img/Current/light1.JPG" -- notice the capital JPG at the end.
The issue in my case was my images where in a .attachments folder (coming from Azure DevOps) and I guess GitHub pages skipped hidden folders.
I had same issue but image case was not problem.
What fixed it was shortening image file name from 26 characters with three underscores to 16 characters and one underscore.
I had to change the path for where my media files were stored for my case:
before my file setup was:
-myusername.github.io
-->index.html
-->index.css
->media
-->myImage.jpg
after I changed it to the setup below, it worked:
I had to change it to this:
->myusername.github.io
-->index.html
-->index.css
-->media
--->myImage.jpg