Get Image from Github repo using GraphQL [Javascript]

Question

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.

Answer 1

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