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?

Try opening that URL in your browser. It takes you to a webpage, not an image file. — Turnip
– Turnip, Commented Oct 18, 2018 at 14:28
I don't think you should use github as a static files host. This may even violate the TOS — DeepSpace
– DeepSpace, Commented Oct 18, 2018 at 14:28
<img src="https://raw.githubusercontent.com/madelinekinnaird/Gerrymandr/master/images/az1.PNG"> — SIGSTACKFAULT
– SIGSTACKFAULT, Commented Oct 18, 2018 at 14:31

Dominique Paul · Accepted Answer · 2018-10-18 14:35:55Z

26

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

answered Oct 18, 2018 at 14:35

Dominique Paul

1,7993 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavn · Accepted Answer · 2021-03-07 17:33:14Z

7

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

answered Mar 7, 2021 at 17:33

Pavn

3223 silver badges11 bronze badges

2 Comments

Sachin Over a year ago

I am creating an android app and thinking to store 300+ images there. I want to ask will GitHub block my app user IP if they send too many requests to access the image?

FN_ Over a year ago

It will be definitely better to use some S3 object storage for this case

Collectives™ on Stack Overflow

Embedding an image stored in github

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related