I changed my _config.yml file to:
baseurl: "/pages"
That's where we're storing our pages. When I do jekyll serve on my localhost, everything is fine. The image path shows up as:
<img src="assets/images/foo/foo-icon.png">
Then I pushed it, and it doesn't work on our live site. The image path is this instead:
<img src="/pages/assets/images/foo/foo-icon.png">
If I change the path to the following, it works:
<img src="../assets/images/foo/foo-icon.png">
How do I get Jekyll to give me the right image path?
If you are serving your site at http://example.com/ rather than http://example.com/pages/, then you don't want to set baseurl. https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/
Related
I am trying to build Github Jekyll pages. Everything went fine and it gives the expected pages locally but the format of the page is really bad when it is in the Github page. On top of that any links on the page go to 404. I uploaded the basic jekyll page in github and it can be find at https://vinuvikraman.github.io/blogs/. Programs in Gemfile.lock have the similar version installed in Github.
How can I make the github page works properly?
Thank you!
Have you tried setting url and baseurl in the config. Because it looks like the site expects it to be on the root domain and not at /blog. For example, the CSS file is refrenced at:
https://vinuvikraman.github.io/assets/main.css
But is actually at:
https://vinuvikraman.github.io/blogs/assets/main.css
just wondering how to fix the img src = "" problem. Im using atom.io and i'm trying to display a .jpeg photo for my website i'm making.
That's a security feature that shouldn't be disabled. It's to stop pages from accessing your local file system and using the data present.
What you should do is install a development server:
Atom Live Server
Chrome Web Server Extension
And make sure that all your resources are in your project folder
--MyAwesomeWebsite
|-index.html
|-photos
|-pic1.jpg
That way your img tag would use relative addressing
<img src='../photos/pic1.jpg'>
Assuming the above image is loaded from index.html
You can switch to relative paths and load these images without issue. For example, rather than this:
<img src="file:///Users/[...]/birdie.jpeg" />
Switch to this:
<img src="birdie.jpeg" />
This works because birdie.jpeg appears to be in the same folder as your HTML file, index.html.
If you had your images in a sub-folder, you would still use a relative path:
<img src="photos/birdie.jpg" />
change
<img src="'../Photos/birde2.jpeg">
to
<img src="Photos/birde2.jpeg">
you have added extra "'"
Situation
Recently I started a photo gallery on my server — https://mailo.svetel.cz/photos.
This gallery is generated by gem (third-party plugin). All the photo assets are located in /photos. In HTML the image assets are referenced via relative path
The strange part is, browser (Safari and Firefox) is loading it as if the path is absolute.
Pretty logically server responds with 404, because there is asset https://mailo.svetel.cz/photos/po_tydnu_venku/thumbs/DSC2433.jpg, but the browser is asking for https://mailo.svetel.cz/po_tydnu_venku/thumbs/DSC2433.jpg .
Before uploading, I did test the page in same browsers and the same code works locally.
Questions
Why does browser think I am giving him absolute path?
Do I need to configure something special for relative addresses when using HTTPS?
Do I need to configure some header in nginx to use relative addresses?
The root path for https://mailo.svetel.cz/photos is https://mailo.svetel.cz/
To make the browser see /photos as a folder, you need to add the directory separator at the end: https://mailo.svetel.cz/photos/
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.
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.