I am having a hard time rendering/ successfully hosting images on Github.
My github repository has the following link tree structure: michaelamay/projects/post.html
and there is an image folder with the structure: michaelamay/projects/images/
In my code i add that to the src in 3 different ways, none of which are working (see image below in line 24,25,28, and 31)
This is how the rendering looks. Just a picture icon shows.
Here is the main page of the repository.
Inside the images folder.
Does anyone have any idea why that is happening? I insert an image from a website and it renders fine but not when called locally from the folders its located.
Given that the file path of the post.html file is michaelamay/projects/_layouts/post.html. If you are trying to access michaelamay/projects/images/img_forest.jpg, the path should be given as:
<img src="../images/img_forest.jpg">
This is because the 'images' folder is not under either 'projects/_layouts' or the root of the project structure.
For more information, you can check this link.
Related
i am practicing html using my computer and i run the html file using the "Live Server" add-on in vscode. the image doesnt show up with the relative path:
<img src="../html/images/coffee background.jpeg" alt="tx"/>
my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.
the image is stored in the images folder inside the html folder, which is stored in the folder above the css.
using inspect element on the img link in the browser this shows up: Cannot GET /html/images/coffee%20background.jpeg
i'm pretty sure this relative path is correct because when i click "follow link" in vs code when i hover over the link, the image shows up in vs code. why isn't the image displaying when i run the html file?
In a Web server, you cannot get lower than the Web root, while in VSCode, you can (you can drill down to the disk root, I imagine).
So when you say,
my root folder is the css folder, which i have opened in vs code.
index.html is stored in this css folder.
this means that you cannot enter a "sibling" folder of css. Just as, when running and your root is /var/www/customer1_pages, you obviously cannot access "../customer2_pages/passwords.txt".
../html/images (but also ../../../html/images etc.) is the same thing as /html/images, and (for the web server) means <ROOT>/html/images, which in your filesystem would be css/html/images.
You need to set the root folder to html, and place the index there. Or move images inside css.
I know this is a very basic question but I am struggling a low for this problem. This is my project hierarchy and I am having an href on the home button which would direct to the contact-us.html page in my html folder but I am not getting the path which I should write. It always shows error 404.
I have tried
/ZingyBeesTest/html/contact-us.html
/ZingyBeesTest/WEB-INF/html/contact-us.html
/html/contact-us.html
and many more. What should I write? I am facing the same problem with images. That is why I have pasted all the images in the same directory as my index.html.
EDIT :
One of my mistakes was that the web.xml and servlet file must be present in the WEB-INF folder and not in the Web Content folder. But the links still do not work.
I am using Github Pages + Jekyll for a blog. I'd love your help!
I just uploaded a post, including an image. After I commit changes I can see the picture properly displayed within the preview, but not in the browser. I also checked on a different browser and on my phone to ensure its not my cache or sth like that.
Code:
How it looks on Github preview:
This is how the image shows on my browser:
I saved the file in the folder images where the .md file is located.
Link to the full code here
Link to the blogpost here
I make PR.
This is raw url.
Please check this.
https://github.com/financenerd/financenerd.github.io/pull/1/files
Jekyll does not copy assets placed in the _posts folder. Therefore your image is missing after build.
You have to put the image in another folder (not starting with an underscore). Like /assets/img/ or /assets/images at the root of your project.
Then in your post, in markdown
or
With Github page, you also have this option: https://nhoizey.github.io/jekyll-postfiles/ but I can't speak for experience.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
I'm creating a small website for university. I'm totally new in web dev and got a problem i can't find the answer for. I was searching similar topics for some good time now but i cant the solution.
It´s important to note, that i access this website with localhost:8080/index for example. So the website is not "online". To start the site i have to go inside the folder and cmd -> npm start
We also use Handlebars (if this is somehow important), so pretty much every file is .hbs
My problem is
<img src="index.jpg" alt="index">
is just not working. It only displays the alt "index" on the page. When i use an global img url (like from wikipedia) its showing me the image. But not when i use "own" images. I was trying diffrent pictures, diffrent names, diffrent locations for the picture but it won't load.
When i use the inspector inside Firefox or Chrome it tells me img don't load(this is translated from germany, i don't know what it tells in english)
impressum.hbs and the picture are inside the same folder
I was copying the picture into every folder but still, it won't load.
You may also doublecheck that the pic is .jpg and not .jpeg, which happens sometimes.
So your index.html and your picture are in the same exact folder?
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder
The solution was an "internal" Problem. The univeristy gives us a framework and somehow you only can access pictures when they are saved inside 1 special folder. So it´s solved. Still i dont understand why they dont tell us this information directly...