hope you're doing fine.
I am currently stuck with my Web App project. This is the context: I would like to code a Web App using J2E. There's a free template that I liked and thus I decided to download it. When starting to use it I notice the CSS isn't applied.
Instead of having this, I have this:
However I do not see where the error is. The CSS & Bootstrap files should be visible in the JSP file and IntelliJ recognizes them. However I can't display these files (whether css or even pictures) that are referenced in "href".
Here's the project structure and code, maybe something's wrong there.
I'm used to HTML and to my understanding JSP isn't too different. Are the referencings different though?
Thanks in advance for any help you'll give,
Fares
YES.
Found the answer. Put resources in different folder than WEB-INF.
I believe that, your HTML file is inside the WEB-INF folder, for the to work either remove the WEB-INF path
<link href='style/stylesheet.css'>
or move your HTML one folder up.
I'm using Jekyll to create a website for my college's Civic Studio program. It is a portfolio site to showcase their work, based on the *folio theme. (It's also unfinished, I just want to put something up to show the department). Here is all my work so far: https://github.com/woodsarah/civstudio
The site runs fine on the local server, but the _site is broken: images, css, and links don't work. I need _site to work locally because the final site will be run from the art department's servers, not on Github or anything.
I think something is wrong with the baseurl and how the css and images are linked, but I don't know how to approach the situation.
I'm sure there's a really simple solution to this and I just don't know it. I'm really, really new to Jekyll, and appreciate the patience in advance!
When you call css, js or img, use site.baseurl.
{{ site.baseurl }}/path/to/ressource.js
I've been using w3schools for a long time and i've never had a problem linking css to my html until today. I have a whole bunch of files referenced as such:
<link rel="stylesheet" href="http://enviroptics.com/Matt/css/styles.css"/>
And I checked the url and when i go to the page everything looks correct in the css, but for some reason it isnt pulling the styles into the html the way it has been for the last 6 months for me... I tried using the chrome editor to see what the problem and it says that my file is not https. It never has been https and i have been using it for many months with no problem.
Does anyone know why it would stop working all of a sudden? Is there another editor that i might be able to use? jsfiddle also tells me i need https..
Any help would be greatly appreciated!
Thanks
open http://enviroptics.com/Matt/css/styles.css.
copy all.
open blocknotes or simple text editor
paste all
save file( name = styles.css )
insert this file in Matt/css in your web server ( ftp )
add <link rel="stylesheet" href="/Matt/css/styles.css"/> in your code html -> head
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've been developing my website using Coda2 and all of the links work perfectly (all images show up, all links work etc etc).
However I have now got MAMP and none of my links work. I think the fundamental issue is that the server doesn't recognise "../" so it can't find any of the other web pages or images!
The structure goes something like this:
index (folder) ---> everything concerning homepage
contact (folder) --> contact.html, other stuff on the web page etc etc
The rel link from index page to contact is "../contact/contact.html" which is definitely correct but when I click it, it will say "contact/contact.html" not found which I think means that the "../" part isn't recognised.
Document root is set to the index folder mentioned above.
Thanks in advance.