Images aren't loading online on my GitHub web page - html

GitHub won't load the images in my images folder. It loads the background image fine, and all the images load when I launch the page offline. I've made sure the images only begin with letters, and tried matching the image file names with the path names in the index.html file case sensitive-wise but still no luck.
website: http://rpboyer15.github.io/sounds-of-the-storm/
repo: https://github.com/rpboyer15/sounds-of-the-storm

Paths are case sensitive. For example in your repository, you have brightwing.jpg and in your HTML you have Brightwing.jpg which will result in a 404. If you use the Chrome Dev Tools and adjust the URL using Inspect Element and it will load properly.
PS: Heroes is an awesome game.

Related

Why do Webp images not load in VScode but they load in Repl.it?

Why do Webp images display this error on VScode:
error
But they work fine on another IDE such as Repl.it? I did not change anything. The paths to the pictures are the exact same but for some reason the images work fine on repl.it but on VScode they display that error. Anyone know why this happens?
I cant share any code since its a whole project but to basically link an image, I do this both on VScode and Repl.it: ./assets/img/image.webp
assets is a folder in the root
Can VScode render Webp images or is that ability not supported as of right now?

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.

.png images not displaying

I have a issue of displaying .png images on web my web page. Other image types excluding .png just work fine. The issue is .png. The web site is located in a sub domain. In the root, a wordpress site is running.
In firebug, I can see a 403 error. But I can assure that I have set 0777 permissions for all images. It couldn't be a permission issue.
Rarely, .pngs are loading. But the second request gives a broken image. I have applied different cache removal techniques including <FilesMatch> directive in .htaccess, appending version attributes to image link, using # ...etc. But nothing works.
The most complicated point is that when copy & paste the image link in browser it shows the .png. However not within a web page.
Can anybody help me resolve this?
Thanks in advance.
Even I tried executing it in a browser. But the .png image doesn't showup for me.
Try changing the image folder permission to 755 or 644.

IMG won't show on remote site

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.

image is not showing on html page

I am new in Ubuntu, as well as using lampp, My problem is, after storing image in image folder of my apps, image is not showing in HTML file ( image not found ). localhost document root is /opt/lampp/htdocs/, and my root folder is f_21 if I use the following link
http://localhost/f_21/index.html // not works
But image showing works well if I use following link:
file:///opt/lampp/htdocs/f_21/index.html // but it works
Any idea ??
You should keep both image and index.html files under htdocs.
for you,place your index.html and image files under f_21 folder and update src attribute of img tag in your index.html
If the link to the image is an absolute path based on your file system with the file protocol, then you won't be able to load it when viewing the html page over http.
Chrome doesn't (I'm not sure about other browsers) allow loading local resources on a file requested with http.
If you're using chrome, you can press ctrl+shift+j to see the console, which will show any errors. You might see something like: Not allowed to load local resource.
The solution is to change the src of the image to be relative to the html page it's on.