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
Related
I've looked at some other resources regarding this problem, but for some reason, they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct. I even uploaded the png as well as jpg to resolve this, but it still didn't make any difference. Also, it seems to be working completely fine with my local server but just not with Github.
Here's a link to my repo for the website on Github pages:
https://github.com/AnushkaKhare786/Coffee-Shop-.git
It is possible the your web files are not correctly placed on Github. Here is document that shows you steps on how to host on Github, which I believe you want to do
I think you should try to separate your images in an Images folder. Also, try to separate the custom stylesheets inside a CSS folder then update the src in your index.html then again make a new repo on Github. I think my advice will help you.
In case this didn't work then my friend refer to this link and read all the instructions carefully - Github Pages Guide
You just need to change the path of cshop3.jpg. To do so, replace the url('/cshop3.jpg'); at line 213 in your styles.css by url('./cshop3.jpg')
- url('/cshop3.jpg');
+ url('./cshop3.jpg'); <- Add the "." before the slash, or remove the slash
Add the "." before the slash, or remove the slash to get to the good directory (You did /cshop3.jpg, that refer to the root of your site, so https://anushkakhare786.github.io/ and not https://anushkakhare786.github.io/Coffee-Shop-/
change your style.css file config to..
change your image path to ('./cshop3.jpg')
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
so strange problem.
I finished my website and pushed the project to github.com.
The picture section of my page won't work because the pictures are added into the html with .jpg but github has it as .JPG (capitalized).
So if you go to my site: https://dhuber666.github.io/Frodo/fotos.html you won't see the pictures. However if you click on one of the missing file icon you will get the link to the full picture (but it say that the page does not exist because filename is written in lowercase letter (as it should be) but github has the images capitalized (.JPG)
If you edit the link like so: /Frodo/images/pic4.JPG (sry have to shorten that I can't post more then one link)
it infect works.
So what is this problem? On my local machine it's fine.
I uploaded it on windows with the github shell like normal.
So I go to my local images folder and I see the filename like so: pic4.JPG --> If I right click it properties it says pic4.jpg
So I renamed it to pic4.jpg and after hitting enter I got .JPG again.
I deleted the whole file ending enter. Rename it again and write .jpg and enter --> Now it's actually pic4.jpg.
But how can I push it to github, because it does not recognize it as changed file?
Also how can I solve this for feature pictures and uploads?
Bonus: Cute dog pics on my page :P
Thank you!
I do not know why this is happening, but I know how you can fix it.
Solution 1: Go into the html and make the file extension capitalized.
Solution 2: Change it via the command line.
Github only allows for image change through commmand line. Follow the link above to their guide on changing via command line.
I added a project site to my Github project. But some photos are not displaying in the site.
Img code:
<img src="img/screenshot2.PNG" class="img-responsive" alt=""> </div>
folder structure (img is a folder):
img
Screenshot2.png
index.html
I tried with .png and .PNG (some earlier SO answers suggested it) and none of them work
Any solutions?
Nevermind, I solved it.
If anyone has the same problem.
GitHub Pages are case sensitive. Not only for folders, but also for image names.
Write what you see.
It is Screenshot2.png. With a lower-case png and a capital S at the start.
As #dnivog mentioned, GitHub's servers take a little time to update files.
If nothing of the above addresses your situation, just check back in a little while. ⏳
Adding my two cents for googlers: Git Pages seem to ignore the directories starting with underscore, so make sure you don't have <a href="_images/whatever.jpg">.
yes, i have the same problem
There are two most powerful ways to solve it
pay attention to the writing of image extensions, because on github pages Images.png is different from images.png
if in your code you write src on image like this src="/images/images.png" just remove / at the beginning of the section, and it will solve your problem.
While hosting a website on Github,I faced the same issue.The image file was saved as an .jpg extension on my local(in small letters) and It was working fine. I pushed the same to github. That did not work.
I had to change the extension to .JPG (in caps)since it was the original extension of the image.Github Pages are case sensitive to the name of the files being uploaded.
I had this problem today. I solved it by:
Double-check the Case Sensitive of the images (i.e. Screenshot.png isn't the same as Screenshot.PNG or even screenshot.png)
Double-check the PATH of the image. For me; It was ../img/myImg.jpg, and I changed it to ./img/myImg.jpg to point to the current directory of the project
After fixing the 2 mentioned issue above, it worked fine... Hope it help you get unstuck!
I had a folder on my laptop named "assets", but when I pushed to Github it became "Assets". I had to change it in my HTML so I could view the images on the Github page
The repo on my laptop:
The repo on GitHub:
I had a similar issue, except I used git-lfs to manage the images. GitHub Pages doesn't support LFS, which will prevent the image from being displayed.
I tried using both JPG or jpg but it didn't work.
I tried below steps and it worked fine.
Try using the complete path. Let's say your image is inside repo-name/img/pic.jpg. Then use https://username.github.io/repo-name/img/pic.jpg instead of just /img/pic.jpg.
for anyone still scrolling through the answers:
do the following steps:
Make sure the image has actually been uploaded on your remote. On your main repo page , click on the name of the image, and see if it opens: if yes continue to next step
Load the site with "Github pages"
Open up inspect element (DevTools) , go to the html element in your .html file OR your CSS Style where you have defined your src
Here try out all the various solutions that people have described above [what worked for me: I added ./to the beginning of my src => ./name-image
whichever solution works, make that change in your local html or CSS and push to github.
I had this exact same problem, GitHub Pages appears to be case-sensitive for images, and I wrote .JPG instead of .jpg, once I changed my image extension to be lowercase it worked.
I struggled quite a while until I saw one post by Elharony: https://stackoverflow.com/users/5560399/elharony
talking about case sensitivity. It turned out Jupyter notebook is case insensitive for image files, but GitHub is. That solved my problem.
If you are importing file into your JS file and using relative path.
Remember to have the relative path from the HTML file and not from JS file as it'll finally compile into the HTML file only.
my original <img src="images/walnut.png" change to <img src="/blob/main/images/walnut.png"
Will work on github hosting pages
You can try by putting the "image link address" from the github repository, in the 'src' attribute of the 'img' tag of the HTML code of your file.
In case anyone has this problem while using jekyll to build a github site, there's yet another variation on this problem. It's a variation of the several answers above to prepend '.' or '..' on the image path in regular html. In the case of jekyll, which renders markdown source files, what should be prepended is {{site.baseurl}}, where baseurl is provided in the jekyll config file and is the root directory of the github repo. In other words:
will render locally,
will render on github pages as per the several answers above, and
will render both locally and on github pages, which is the best way to do it with jekyll since all the coding of the site can be done locally in advance of pushing to github.
I had the same issue In my case the issue was of /
<img src="/Images/shared/desktop/logo.svg" alt="" class="logo" />
I was using this for my Image in html in local machine it was working fine
but in github its not displaying image
but when I removed / from the path it worked
<img src="Images/shared/desktop/logo.svg" alt="" class="logo" />
I had the same problem with GitHub pages:
instead of ../img/image.png, I wrote ../img/image.PNG and now it works fine.
I know this is not a solution but somehow worked for me.
Just in case if someone encounters this error!
I had the same problem, and I changed 'img' folder to 'image', then it worked.
I found this awesome program(html editor) called Brackets and it's by Adobe.
Now reason why i got the editor was because i wanted to Live Preview PHP code, but i found out later that i needed a Wamp Server.
Now, i was in the mood of making an about page but i couldn't live preview. Live Preview Base URL is empty, and when i try to live preview, i get this: > http://puu.sh/aDkET/4209ec1192.png < and the lightning bolt is half orange(i heard it needs to be red to work). I have tried the lot... Entering as Live Preview Base URL to http(semicolon)//localhost:(insertporthere)/ <-- Wamp Server, tried only localhost, left it empty, I don't know how to make this work.. I am stuck and i basically need real preview..
Please, please help me! D: I have searched the internet looking for solutions, but no. If you can, a step-by-step tutorial would be much appreciated :)
Kind regards,
- PiguFilms
The Live Preview "Base URL" is the localhost URL that corresponds to the root folder of your project. Brackets uses this to map from a local path on disk to the server URL which serves up that same file: it takes the HTML file's path relative to the project root, appends that relative path onto the Base URL, and then launches the resulting full URL in Chrome.
So, for example:
If your page is at http://localhost/myapp/page.php and the page.php file is in a "myapp" subfolder of your project, your base URL is just http://localhost/.
If your page is at http://localhost/myapp/page.php and the page.php file is in the root of your project, your base URL is http://localhost/myapp/ (this way the path is "/page.php" relative to both bases).
If you think you have the Base URL set correctly but it's still not working, try going to the same URL manually in your browser to make sure your server is operating correctly.
More details on using Live Preview with your own local server can be found here: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.
although #ytpete's answer is the right choice for your problem but you need to do, as i say, first. In simple words, go to file(in Brackets), click open folder and now make the project directory exactly same as your local host server for php files i.e. C:\Program Files\Ampps\www\phpFiles (i am using Ampps and here 'phpFiles' is a subfolder inside which relies my php file and also html file too). Now you can follow steps shown by ytpete and you are set to live preview of your php file.
I had this problem as well. What I did was simply goto File->Open Folder... it all worked after all the necessary files were loaded into Brackets.
If you are using windows try running brackets "As administrator", worked for me
I had this same issue once I installed Xampp. This video resolved it for me. Essentially just select, File > 'Enable Experimental Live Preview' should have a check mark.
Make sure you don't have an internet bandwidth limiter (such as NetLimiter) running while using Brackets' Live preview.
I have just fixed this issue for myself, I had 'Experimental Live Preview' ticked under file. I unticked it and now it accepts my 'http://localhost/mywebsite' URL when I go to live preview.
This worked for me. I restarted my system and then unchecked "enable experimental live preview" in file.
this worked for me, and i don't remember where i saw it, but go to : cd $HOME/.local/share/applications and delete everything chrome related.
This worked for me, and i didn't dare to use live preview again.
On Ubuntu 16.04 LTS and Chrome Version 61.0.3163.100 (Official Build) (64-bit)
Put your files in the same folder where you have index.html file
I have selected the option called "reload with extension" from Bracket's debug menu and that resolved live preview issue. More details can be found here.
For everyone, this problem can be resolved by following steps:-
On menu bar, go to File --> Open Folder (folder which have your html file for live preview)
Select Folder
Select your html file from left side bar for live preview
Click on bolt icon on right (preview button)
All it melts down to the fact, that you need that folder(which have your file) selected to view your output in live preview.
Let me know, if it helps someone. :)
It is because it doesn't find the 'html' file. Live preview basically needs html file to run it .In my case, I have a project made in php , my file name is index.php,I renamed it to index.html and it works like charm :)