IMG won't show on remote site - html

I have a webpage where the images are not being found (running chrome). I synced the remote directory with my local one, so all files should be identical, however I can see the images locally but not on the remote site. Can anyone explain why?
I have the following directory where my index.html is:
icons/circle/*.png, where * is some generic social media i.e. (facebook, twitter, etc.)
using this code to show it on html
<img class="social-media" src="icons/circle/facebook.png">
But it only shows when I view my webpage locally, not when everything is uploaded to the server.
See webpage footer at dmacmill.com
Full directory listing:
Temp solution
I decided to just create another folder to hold all my icons, now they work for some reason. Still never found out the underlying cause of this.

Related

How can I browse a local html site?

I'm running into two issues trying to browse a local html site on firefox for testing:
When I try to make a link to the root (href="/"), firefox shows the macos root directory on a file browser
When I go to a directory, firefox shows a file browser rather than opening index.html
This seems to be fixed by uploading the site to the internet, but I'd like to be able to test the site locally without uploading it

CSS is not showing in the server host

I have uploaded a website to the server but only HTML is shown, CSS is not. The CSS is show, but the CSS I uploaded earlier is shown. The new CSS I uploaded is not showing. But it is showing on my local computer without any problem. It work good in my computer. I tried cleaning the host server and uploading my files again.

Make browser treat locally stored folder like a site root?

Is there a way, without setting up a web server, to make Firefox or Chrome treat a locally stored site's root as it would be if viewed on the web?
So that when an HTML file is opened that contains URLs beginning with /
<link rel="stylesheet" href="/css/style.css">
instead of the browser searching for
file:///Users/me/Documents/Websites/Site/httpdocs/css/style.css
...and finding nothing, it would instead look for the file relative to httpdocs (because the browser was instructed to), and therefor find style.css?
When building a site that has root path URLs it's annoying that I can't view the pages in my browser without copying the whole site to the computer's root folder. All CSS, images, and scripts are not found because they are being searched for in my local machine's root. The URLs should remain as root paths however, because that will be "correct" once the site goes online.
Setting up a web server just for this purpose, on projects where I don't need it for anything else (when PHP and the like are not needed), is inconvenient.
Is there perhaps a setting or add-on that can be used to make a browser treat a specific site root folder stored locally as if it were hosted on the web? Thanks.

Blank page when uploading website files to web hoster

So I downloaded my own portfolio after making it through a portfolio maker and decided to download it, modify the html files to my liking and then wanted to upload them to a web hoster where I would use my own domain for it, however when I tried uploading my files to the main folder on my website's directory and check the website out it simply shows me a blank page, even though it actually displays my logo on the tab on top. When I open the index.html with Chrome from my local files it displays my website perfectly however when I upload it to my website and try view it that's when I get a problem. I have tried using 2 different web hosters and tried uploading my files through FTP and direct upload and still got the same blank page.
NOTE: I uploaded all the files in my site folder not just the index.html and if it works when I opened it with Chrome I don't see why it wouldn't work on my website.
It looks like you have forgotten to upload some files:
All the ones marked 404 are missing and need to be uploaded.

JS not loading properly after hosting site

I have hosted my site on AWS server and I am encountering with weird problem When I load my page for the first time files are loaded as below
When I reload the site folder structure becomes
which is correct.
Hence my site is not behaving properly for the first time. Images are missing. Can somebody tell why this is happening?