How do you put Images on the README.md file?

I was asking because I see a lot of repositories and tried doing the same thing but couldn’t figure out how to do it

5 Likes

Hi @shadowelite7,

README.md files are created using Markdown which you can use to format text and add images. The GitHub Guide for Mastering Markdown has some helpful hints that can get you started with this.

Thanks!

19 Likes

Image description

32 Likes

thx

wrote:

Image description

thx

wrote:

Hi @shadowelite7,

 

README.md files are created using Markdown which you can use to format text and add images. The GitHub Guide for Mastering Markdown has some helpful hints that can get you started with this.

 

Thanks!

1 Like

Does this still work?  Because I’m trying the same thing, then navigating to the github page, and all I see are broken image icons, even though some display fine locally.  I expected “Test Image 1” to work when the file 3DTest.png is uploaded into the same directory.

![Test Image 1](3DTest.png)

![Test Image 2](“3DTest.png”)

![Test Image 3](/3DTest.png)

![Test Image 4](https://github.com/tograh/testrepository/3DTest.png)

![Test Image 5](https://…/3DTest.png)

![Test Image 6](master/3DTest.png)

![Test Image 7](https://github.com/tograh/testrepository/master/3DTest.png)

![Test Image 8](https://raw.githubusercontent.com/tograh/testrepository/master/3DTest.png)

11 Likes

Hi @tograh,

For the images to work properly, you have to include the full image URL. That said, if none of your images are working, I’d be curious to see the repo in which they are located, if possible. Are you doing this work in a public repo? If so, can you provide a link so I/we can take a closer look?

3 Likes

Thank you for the reply, Nadia.  We’ve been looking into the problem, and it seems to be limited to inside our corporate network.  Outside, we see the markup displaying as expected.

I should have updated sooner!  Many thanks.

1 Like

OK i give up. how do you know the full path?

tried both of these. my images are in the top level folder

<img src=“https://github.com/KrisKasprzak/ILI9341_t3_controls”>
Equalizer

Hi @kriskasprzak ,

In your case it would be:

https://raw.githubusercontent.com/KrisKasprzak/ILI9341_t3_controls/master/Equalizer.BMP

You can obtain the link by going to:

https://github.com/KrisKasprzak/ILI9341_t3_controls/blob/master/Equalizer.BMP

And then clicking  View raw.

1 Like

that did not work.

apparently the site will not use 16-bit BMP’s I had to convert to jpg

this actually worked

header image
header image

1 Like

Oh, I didn’t know that. Thanks for sharing your findings with the community!

Need to buy Github account which register before 1/9/2019

Here’s the thing. I want to get my link right before I check the file into my github repository. But it looks like I cann’t make the link work until after I check it in! Is there any way to test my link before I check anything in? 

Right now, the graphic is not check in, and the .md file is there, but without the new link.

This did the trick nicely! Upload the file to the same directory and just use this to inludie it within the readme. Thanks a lot, this saved me a lot of searching around for a solution.

For local images I used this:

I am torn. I liked the initial simplicity of Markdown. However, I have now begun to question the merits of developing a radically new language/syntax which appears to rapidly solve some low hanging problems but leaves a trail of undocumented or poor documented issues as we go delve deeper. A part of me wonders whether we should go back to HTML -  whos syntax is rock solid and the ecosystem of editors very well developed.

I got a similar issue and when I added:

raw=true

it worked. So the code, in HTML, for my imagem was:

<img
src=“images/SubPronouns.jpg”
raw=true
alt=“Subject Pronouns”
style=“margin-right: 10px;”
/>

With the image in the git repo root, this worked for me.

<img src="./myimage.jpg">

1 Like

Using This Command 

Image description

18 Likes

I tried the solutions given below, but I didn’t work for me. I uploaded the image from the command line.

1 I created a folder with images 

  1. Navigate to the image folder and right-click to get the image link

  2. go to your README file and paste the link 

  3. By doing this GitHub will generate automatically the perfect width to fit your page.

Example

Images src link:

<img width=“964” alt=“java 8 and prio java 8  array review example” src=“https://github.com/jaimehernan95/arrayReview-java/blob/master/images/%20arrayExample.png”>

README. File

https://github.com/jaimehernan95/arrayReview-java/blob/master/README.md

jaime