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.
Related
I have made a project just for fun in which i had applied background images from css, they are very well working in localhost but when uploaded on github all the images are visible except the one on the background.
The link for the github is below.
https://github.com/AmanShahwaz/Driver-s-Community
Thanks in advance
Here is your problem:
<img src="/D-Community/imgaes/1.jpg" alt="" srcset="">
Your repo name is "Driver-s-Community", which is also the base URL of your github pages site (https://amanshahwaz.github.io/Driver-s-Community/).
However, your code URLs link to https://amanshahwaz.github.io/D-Community/, which simply does not exist (it did not at the time of writing), and thus gives the broken links. This is probably due to you having a different name for your local folder from your repository name. To prevent such conflicts, you should keep both names consistent.
The solution is to either rename your local working directory to "Driver-s-Community" or your repo to "D-Community", and change your base URLs accordingly.
If you rename your local folder to Driver-s-Community, then your URLs should look something like this:
<img src="/Driver-s-Community/imgaes/1.jpg" alt="" srcset="">
Otherwise, no need to change your URLs.
Also, just as a side note, considering your project structure, you should probably use ./ instead of explicitly typing out your base URL. This helps to avoid such mishaps.
Hoped this helped and if it did, please mark as accepted answer. Thanks!
P.S. you have a typo in "imgaes", should be "images". :)
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 use Sublime Text 3.0 to code html-based website. As indicated by my username, I'm not much of an expert. I'm having trouble adding an image with sublime text 3.0 using the latest google chrome browser version 44.0.2403.130 m and I run windows 8.1 pro (still waiting for the upgrade to w10 Dx) anyway, I'm pretty sure my software isn't the problem. I can upload images using a externally linked image such as
http://www.examplesite.com/picture.gif
and it will appear but when I try to upload from my own directory as such
<h1><img src="Logo.jpeg" alt="Logo"/>Prespective News</h1>
It will not show up on my web browser, it just shows the alternate text of Logo, is there something wrong with my code? Please help me, I've spent at least 4 hours. trying to figure it out! also it's all my pictures, not just 1.
The image is in the same directory as my HTML file is. When I do the F12, it shows an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users/Owner/Documents/My%20Web%20Sites/Website%202/Logo.jpeg
This is confusing because this is exactly where my file is in:
C:\Users\Owner\Documents\My Web Sites\Website 2\Logo.JPEG
The html file is in
C:\Users\Owner\Documents\My Web Sites\Website 2\idk yet.HTML
The img src URL you provided was probably incorrect. If you open chrome dev tools (F12) you should be able to see (on the network tab) where the image source you are trying to fetch is. Then you can compare it to the path your image actually resides.
Things you can do:
Check if the name matches the one you provide exactly (case sensitive)
Remember the sources you link are relative to your page, so if you put it in a folder it might need to be src="images/Logo.jpeg"
You might be using jpg instead of jpeg, please check that also.
When coding a website you should keep all the required images in a separate image folder and use the source address appropriately.
Suppose you have an image folder in your current working directory then use
img src="image/logo.jpg" />
The reason for this error is your image not found in your specific folder.
Provide correct folder name for the image path. This issue can be easily solved. Use Firebug or F12 keys for troubleshooting.
I usually put my images in a folder aside to the html file so in the same directory
<img src="images/image.jpg" alt="image" title="image of an image" /> <h1>Titre1</h1>
Try it this way maybe. I would seperate the title h1 from the image.
If it doesn't show up it's because Logo.jpeg isn't in the same directory. Since your file name is Logo.JPEG it should be:
<h1><img src="Logo.JPEG" alt="Logo"/>Prespective News</h1>
Capitalisation matters.
I found out what I was doing wrong. Turns out the file is a JPEG but for some reason it's extension is .JPG not with an E. I'm not sure why it's not listed as a .JPEG since the file type is JPEG, anyway thank you for your responses ya'll! I probably wouldn't have figured it out if I wasn't responding and looking at the picture information xD
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
I am just learning web development and am having a problem I just can't seem to fix.
I have images I want to display on a page, in my ftp they are in book/detailed_image
On my page I have the img src
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I have checked multiple times and the source is correct. If I move the image up a directory to the book directory and change the src the images display correctly.
What could be the cause of this?
The file attributes of the book and detailed_image directories are the same has are the attributes of the image files.
Using firebug it says the url failed to load.
If you have your html file in the same location as your new folder then there is no need to put a forward slash at the beginning of your url.
Change:
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
To:
<img src="new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I think it is a problem with the permissions of the folder "detailed_image". If you do a chmod 755 detailed_image then it will work.
this probably isn't the case for you, but I had the same problem - I got a 404 not found error with the image in images/Paris/p1.png but if I moved the image into the images folder it displayed correctly....I fixed my issue by changing the name of the 'Paris' folder to 'paris' - I have no idea why but it worked...
I just solved the issue which I also had: it seems that the subdir "Images" has to have the same rights as the images contained therein.
I changed the access rights for the folder to "755" and added to include all subdirs with the same rights, now it works!
Hope it does the same for you...