Embedding an image stored in github

Question

I'm uploading a folder of images for a project to GitHub and I want to display them in Flask.

<img src="https://github.com/madelinekinnaird/Gerrymandr/blob/master/images/az1.PNG"> 

I'm having trouble getting this to work. Do I need to use another image storage site, or is it possible to use GitHub for this purpose?

Answer 1

Your approach looks correct. However, you are linking to the file in the github repository. Instead, you should link to image itself. You can get the link by right clicking on the image and select "copy image address".

In your case the link would be:

https://github.com/madelinekinnaird/Gerrymandr/blob/master/images/az1.PNG?raw=true

Answer 2

Assuming your image are located at

https://github.com/userName/ImageRepo

Than to access that image from a browser use below link https://raw.githubusercontent.com/userName/ImageRepo/master/FileName.ext

eg: location: https://github.com/pavanghai/images/blob/master/wine_scatter.jpg

Browser link: https://raw.githubusercontent.com/pavanghai/images/master/wine_scatter.jpg