I want to get image from a github repository and show it in my website.
Say, I have a image in my github-repo called banner.png. I have been successful at getting the content of README.md file which is a plain text. But images are binary thus I don't know how to get them (or just a url to that image) to use in img tag. I've searched and the blob does have a commitUrl but I don't know what that is for. I've tried using as the src for img but it doesn't work. I've even tried visiting that url but it just give a 404 not found.
If your repo is public, you can use a free hosting solution such as https://www.jsdelivr.com which can serve the file from Github (https://www.jsdelivr.com/features#gh) with the right content-type. You just have to build the url according to :
https://cdn.jsdelivr.net/gh/<user>/<repo>#<branch>/path/to/file.png
A few example :
https://cdn.jsdelivr.net/gh/bertrandmartel/newhaven-oled-dk51#master/img/newhaven-dk51.jpg
https://cdn.jsdelivr.net/gh/bertrandmartel/websocket-java#master/exemples/readme_images/clientSide.png
https://cdn.jsdelivr.net/gh/bertrandmartel/fritzing-parts#master/metec-braille-line-20-cell/metec-braille-line-20-cell.svg
Related
I have a Github repository with Github-Pages activated using theme: jekyll-theme-leap-day that is provided in the repository settings. I would like to add an image that is in my repository to the webpage that is created by Github-Pages. How do I do it?
I have tried:
[Figure 1](https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png)
but this markdown format only creates a hyperlink to Figure 1 in the repository. But this outcome is not what I desire. Rather, I want to show the figure in the webpage. How do I do this?
My webpage index file is located at https://github.com/JulianChia/lowerboundSARSCOV2/blob/gh-pages/index.md
See line 17.
I read somewhere that I might need to amend the _config.yml file for Jekyll webpages. But according to my https://github.com/JulianChia/lowerboundSARSCOV2/edit/gh-pages/_config.yml file, it only contains a line theme: jekyll-theme-leap-day. There is nothing else in there that I could amend.
The webpage link is https://julianchia.github.io/lowerboundSARSCOV2/
Instead of using this as image src
https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png
use this as image src
https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png
Remember you are trying to link an image to your site that is raw content so you have to use raw.githubusercontent.com instead of github.com
Or, If you prefer to use github.com to directly get the raw link you need to add ?raw=true after your link. For example:
https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png?raw=true
Then it will redirect you to:
https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png
That you need to put in the src attribute of the image. It is the easiest way to get the raw link for your Github file.
I am adding an image in markdown which is hosted on GitHub.
When I run the docusaurus server using npm start it doesn't load the image for me but returns 404 Not Found.
By visiting the image URL, you can see the hosted image is present.
Any ideas on how to fix this? I'm on Docusaurus 1.14.
Thank you
This is not a Docusaurus issue.
The image URL is a GitHub page containing the image, of HTML type, not an image file. You can obtain the image URL by right clicking and getting the source. Try this - https://raw.githubusercontent.com/neutraltone/awesome-stock-resources/master/img/splash.jpg
Use this so that your image will display
I want to add an image which is hosted on an external source to Github, but I see only link when I confirm it to be posted.
I use this format but it does not work. I click on the link that is created and I see the message Non-Image content-type returned.
The problem was, the link you provided wasn't the image itself. It was the link to a website that contained the image.
By clicking on the image and copying the adress of the image you get the url of the actual image.
This should work for you:
I have a Github repo where the readme.md has relative links to display images from a folder called img.
This displays fine at the project address.
But on the Github page, the links are broken. They are trying to reference the following URL, without the project name:
https://simongis.github.io/img/ArcGIS_Pro_DI_LicenseCheck.jpg = 404
From this answer and this blog post, I thought this issue has been resolved?
Can someone point out where I am going wrong?
I have tried playing around setting the baseurl to my project director in the _config.yml but that did not seem to make any difference.
That is exactly what baseurl solves:
Base URL
Serve the website from the given base URL
Set it with the project name and make sure you generate the links in your website including it , for example with the absolute_url filter
baseurl: /gnaf-for-arcgis
I have a javascript and html snake game and I want to host it on github I do All the steps and make a gh-pages But I get this error 404 File not found ?when I search Username.github.io/repository-name
Any idea why and how I can fix it? Should I wait for github email After I do the commands??
Most web servers have a "default" page, e.g. index.html, that will be shown when the user doesn't request a particular page. GitHub Pages is no different.
Your repository contains a single file called snakeGame.html, which works just fine if you request it. Unfortunately, GitHub Pages doesn't know that this page should be shown by default. As far as it knows that file has no special meaning.
To get your page to show up at http://peggykh.github.io/Snake/ instead of http://peggykh.github.io/Snake/snakeGame.html, you should rename your file to index.html.