In this tutorial, we are going to learn about two different ways to add images to the GitHub README.md file.
GitHub Profile ReadmeIf you are a web developer, app developer, or any kind of developer, it's important to have a great github portfolio. This is a new gith. 👉 Become A VS Code SuperHero Today: Get FREE AI-powered code completions from Kite: https://www.kite.com/get-kite/?utmmedium=refe. 2010: The 'Github Flavored Markdown' doesn't support this kind of feature for any page:An old support thread 'Embed YouTube videos in markdown files' stated: With pages.github.io, yes, everywhere else, no. (Note: as detailed in 'Github Top-Level Project Page', github.io is the new domain for user and organization pages since April 2013.The page GitHub publication is presented here).
- Open your GitHub repository and navigate to the images folder or the folder where your images are placed.
- Click on the image you need to add to your README.md file.
- Now, right-click on the image and select
copy image addressoption.
- At final, open your README.md file and use below markdown syntax to add an image.
In the above syntax, you need to add your copied image address inside parenthesis
- Open your GitHub repository and click on the Issues tab.
- Now, click on the
New Issuebutton and drag and drop your image inside
Leave a comment box.
- Once the image is successfully uploaded you will get a markdown image syntax, just copy and paste it inside your
Github Video In Readme
Sometimes you may want to embed a youtube video into your repository’s README.md file. There are several methods such as using youtube’s auto-generated picture, a video screenshot, or an animated gif.
Use youtube’s preview picture
We can use youtube’s auto-generated picture for the video:
Which gives you this (using –b-9HrKK6w for VIDEO-ID). But this doesn’t feel like a video. We can do better.
Notice how it’s not completely certain if it’s an image or a video.
Use a video screenshot or .gif
To make it feel more like a video, we can use a video placeholder picture, screenshot, or .gif for our image. First create a directory to hold the screenshot or gif such as
doc/screenshot_youtube.PNG then use this format.
Best Github Readme
This method gives us this. If you need a quick fix, this method “tricks” the user into thinking the video is on the README page with a picture. It’s not perfect but it works.
Good Github Readme
Similarly, you could use an animated .gif instead since they are rendered on Github’s readme.
This method is probably the most eye catching but it takes some work to get that .gif file.
Embed Video In Github Readme