最近、GitHubに参加しました。私はそこでいくつかのプロジェクトを主催しました。

READMEファイルにいくつかの画像を含める必要があります。どうすればいいのかわかりません。

私はこれについて検索しましたが、「Webでイメージをホストし、README.mdファイルでイメージパスを指定する」ように指示するリンクがいくつかありました。

サードパーティのWebホスティングサービスで画像をホストせずにこれを行う方法はありますか？

このマークダウンを試してください：

![alt text](http://url/to/img.png)

画像がリポジトリに保存されている場合は、画像のrawバージョンに直接リンクできると思います。すなわち

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

次のような相対パスを使用することもできます

![Alt text](relative/path/to/img.jpg?raw=true "Title")

• 新しい問題を作成できます
• 画像をアップロード（ドラッグ＆ドロップ）します
• 画像のURLをコピーして、README.mdファイルに貼り付けます。

これは詳細なyouTubeビデオで、これを詳細に説明しています：

https://www.youtube.com/watch?v=nvPOUdz5PL4

それはそれよりはるかに簡単です。

次のように、リポジトリのルートに画像をアップロードし、パスなしでファイル名にリンクします。

![Screenshot](screenshot.png)

単純なHTMLタグを使用して画像を追加することもできます。

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>

投稿された解決策の多くは不完全であるか、私の好みではありません。

• imgurのような外部CDNは、チェーンに別のツールを追加します。ええ。
• 課題追跡でダミーの課題を作成することはハックです。混乱を招き、ユーザーを混乱させます。このソリューションをフォークに、またはGitHubから移行するのは面倒です。
• gh-pagesブランチを使用すると、URLが脆弱になります。gh-pageを管理するプロジェクトに取り組んでいる別の人は、これらの画像へのパスに依存する外部の何かを知らない可能性があります。gh-pagesブランチはGitHubで特定の動作をしますが、これはCDNイメージのホストには必要ありません。
• バージョン管理でアセットを追跡することは良いことです。プロジェクトが成長して変化するにつれて、複数のユーザーによる変更を管理および追跡するためのより持続可能な方法になります。
• 画像がソフトウェアの特定のリビジョンに適用される場合、不変の画像をリンクすることが望ましい場合があります。そうすれば、ソフトウェアの変更を反映するためにイメージが後で更新された場合、そのリビジョンのreadmeを読んでいる人は誰でも正しいイメージを見つけることができます。

触発され、私の好適な解決策、この要旨は、使用することです資産の枝をして、特定のリビジョンへのパーマリンク。

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is optional, you'll see below.

画像のこのリビジョンへの「パーマリンク」を作成し、Markdownでラップします。

ただし、手動でコミットSHAを検索するのは不便です。そのため、このhelp.githubページにあるように、ショートカットとしてYを押して、特定のコミットのファイルへのパーマリンクに移動します。

アセットブランチに常に最新の画像を表示するには、blob URLを使用します。

https://github.com/github/{repository}/blob/assets/cat.png 

（同じGitHubヘルプページからファイルビューにブランチの最新バージョンが表示されます）

フォルダー（myFolder）にイメージ（image.png）をコミットし、README.mdに次の行を追加します。

![Optional Text](../master/myFolder/image.png)

• 画像の追加に関する問題を作成する
• ドラッグアンドドロップまたはファイルチューザーで画像を追加する

• 次に、画像ソースをコピーします

• 次に![alt tag](http://url/to/img.png)、README.mdファイルに追加します

できた！

または、画像ホスティングサイトなどimgurを使用してそのURLを取得し、README.mdファイルに追加するか、静的ファイルホスティングを使用することもできます。

サンプル問題

READMEファイルにいくつかの画像を含める必要があります。どうすればいいのかわかりません。

GitHubリポジトリのreadmeのシンプルな画像ギャラリーを作成およびカスタマイズできる小さなウィザードを作成しました。ReadmeGalleryCreatorForGitHubを参照してください。

ウィザードは、GitHubがでimgタグの発生を許可するという事実を利用しますREADME.md。また、ウィザードは、画像を問題領域にドラッグアンドドロップすることでGitHubにアップロードする一般的な手法を利用します（このスレッドの回答の1つで既に説明されています）。

<img>リポジトリへの相対srcを含むREADME.mdにタグを追加するだけです。相対srcを使用していない場合は、サーバーがCORSをサポートしていることを確認してください。

GitHubがinline-htmlをサポートしているため機能します

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

ここを観察

基本的な構文

![myimage-alt-tag](url-to-image)

ここに：

1. my-image-alt-tag：画像が表示されない場合に表示されるテキスト。
2. url-to-image：画像リソースが何であれ。画像のURI

例：

![stack Overflow](http://lmsotfy.com/so.png)

これは次のようになります。

テーブルを目立たせるために使用してください、それはそれに別個の魅力を与えます

テーブル構文は次のとおりです。

各列セルを記号で区切る |

とテーブルヘッダー（1行目）、2行目 ---

| 列1 | カラム2 |
| ------------ | ------------- |
| 画像1 | 画像2 |

出力

<img src="url/relativePath">2つの画像を使用している場合は、画像1と画像2を配置します。

注：複数の画像を使用して列を増やすだけの場合は、幅と高さの属性を使用して読みやすくすることができます。

例

| 列1 | カラム2 |
| ------------ | ------------- |
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">|

間隔は関係ありません

出力画像

助けられた：adam-p

あなたはただ行うことができます：

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

その後、次のREADMEようにファイルで参照するだけです。

![diagram](diagram.png)

私の場合、私はimgurを使用し、この方法で直接リンクを使用します。

![img](http://i.imgur.com/yourfilename.png)

代替のgithub CDNリンクを使用して、README.md（または外部）からプロジェクトのイメージにリンクできます。

URLは次のようになります。

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

プロジェクトにSVG画像があり、Pythonプロジェクトドキュメントでそれを参照すると、レンダリングされません。

プロジェクトリンク

以下は、ファイルへのプロジェクトリンクです（イメージとしてレンダリングされません）。

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

埋め込み画像の例：

生のリンク

ファイルへのRAWリンクは次のとおりです（まだ画像としてレンダリングされません）。

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

埋め込み画像の例：

CDNリンク

CDNリンクを使用して、（画像としてのレンダリング）を使用してファイルにリンクできます。

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

埋め込み画像の例：

これは私のプロジェクトの画像を私のREADME.mdファイルとPyPiプロジェクトの両方で使用できる方法ですreStructredText doucmentation（here）

私はこの問題を解決しました。他の誰かのreadmeファイルを参照するだけで済みます。

最初に、画像ファイルをgithubコードライブラリにアップロードする必要があります。次に、画像ファイルのアドレスを直接参照します。

私は通常、サイトでイメージをホストしています。これは、ホストされている任意のイメージにリンクできます。READMEでこれを投げてください。.rstファイルについては機能しますが、よくわかりません.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

私の場合、Githubだけでなくにも印刷画面を表示したいと思いましたNPM。相対パスの使用は内Githubで機能していましたが、それ以外では機能していませんでした。基本的に、私が自分のプロジェクトをプッシュしたNPMとしても（単に同じを使用するだけreadme.mdで）、画像は表示されませんでした。

私はいくつかの方法を試しましたが、最後にこれが私にとってうまくいきました：

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

これでNPM、パッケージを公開できる場所や他の場所でイメージが正しく表示されます。

ドキュメンテーションのためにいくつかの写真をアップロードする必要がある場合、良いアプローチはgit-lfsを使用することです。git-lfsがインストールされていると仮定すると、次の手順に従います。

1. 各イメージタイプのgit lfsを初期化します。

   git lfs *.png
   git lfs *.svg
   git lfs *.gif
   git lfs *.jpg
   git lfs *.jpeg
   

2. 画像の場所として使用されるフォルダを作成します。doc。GNU / LinuxおよびUnixベースのシステムでは、これは次の方法で実行できます。

   cd project_folder
   mkdir doc
   git add doc
   

3. docフォルダーに画像をコピーして貼り付けます。その後、git addコマンドでそれらを追加します。

4. コミットしてプッシュします。

5. 画像は次のURLで公開されています。

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ repo内のimage_location ^

ここで：* ^github_username^はgithub内のユーザー名です（プロファイルページで確認できます）* ^repo_name^はリポジトリ名* ^branch^は画像がアップロードされるリポジトリブランチです* ^image_location in the repo^は画像が保存されているフォルダーを含む場所です

また、最初に画像をアップロードしてから、プロジェクトのgithubページの場所にアクセスして、画像が見つかるまで移動し、downloadボタンを押して、ブラウザーのアドレスバーからURLをコピーして貼り付けることもできます。

見て、これを参考として私のプロジェクトから。

次に、URLを使用して、上記のマークダウン構文を使用してそれらを含めることができます。

![some alternate text that describes the image](^github generated url from git lfs^)

例：この写真を使用するとします。次に、マークダウン構文を使用できます。

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

これだけでうまくいきます!!

タグ内の大文字のファイル名に注意して、PNGファイルをルートに置き、パスなしでファイル名にリンクします。

![Screenshot](screenshot.png)

私はすでに受け入れられている答えの例を拡張または追加しています。

イメージをGithubリポジトリに配置したら、

次に：

• ブラウザで対応するGithubリポジトリを開きます。
• 対象の画像ファイルに移動して、新しいタブで画像を開きます。
• URLをコピー
• 最後に、次のパターンにURLを挿入します ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

私の場合、それは

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

どこ

• shadmazumder 私です username
• Xcode それは projectname
• master それは branch
• InOnePicture.pngは、image私の場合InOnePicture.pngはルートディレクトリにあります。

これを行うには、2つの簡単な方法があります。

1）HTML imgタグを使用し、

2）！[]（画像が保存されているパス/image-name.png）

画像を開いている間、ブラウザのURLからコピーできるパス。スペースの問題が発生する可能性があるため、2ワードのパスまたはイメージ名add->％20にスペースがあるかどうかを確認してください。ブラウザと同じように。

どちらも機能します。詳しく理解したい場合は、私のgithubをチェックしてください -> https://github.com/adityarawat29

この回答は、https：//github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.mdにもあり ます。

以下を使用してリポジトリから画像を表示します。

先頭にドメインを追加：https : //raw.githubusercontent.com/

追加フラグ： ?sanitize=true&raw=true

<img />タグを使う

• ドメイン：raw.githubusercontent.com/
• ユーザー名：YourUserAccount/
• リポジトリ：YourProject/
• 支店：YourBranch/
• パス：DirectoryPath/
• ファイル名：example.png

SVG、PNG、JPEGに対応

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

使用後に以下に表示される実際のコード例：

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com：

ありがとう： - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -in-markdown / readme.md

別の解決策を見つけましたが、まったく異なるので、説明します

基本的に、タグを使用して画像を表示しましたが、画像がクリックされたときに別のページに移動したかったので、次のようにしました。

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

改行で区切って隣同士に配置すると、画像をクリックすると、リダイレクトする他のサイトへのhrefが含まれているタグに移動します。

最新

WikiはPNG、JPEG、またはGIF画像を表示できます

今あなたは使うことができます：

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-または-

次の手順を実行します：

1. GitHubで、リポジトリのメインページに移動します。

2. リポジトリ名の下で、[Wiki]をクリックします。

3. Wikiサイドバーを使用して、変更するページに移動し、[編集]をクリックします。

4. Wikiツールバーで、[ 画像 ]をクリックします。

5. [画像の挿入]ダイアログボックスで、画像のURLと代替テキスト（検索エンジンとスクリーンリーダーで使用）を入力します。
6. OKをクリックします。

ドキュメントを参照してください。

table複数のスクリーンショットを追加する場合は、次のようにアクセシビリティを向上させるために表形式のデータを使用してそれらを整列させたい場合に使用することを検討してください。

マークダウンパーサーがサポートしている場合は、role="presentation"WIA-ARIA属性をTABLE要素に追加して、thタグを省略できます。

ステップバイステップのプロセス、最初にフォルダーを作成し（フォルダーに名前を付けます）、Readme.mdファイルにアップロードする画像を追加します。（プロジェクトの既存のフォルダに画像を追加することもできます。）次に、Readme.mdファイルの編集アイコンをクリックしてから、

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

画像を追加すると、「プレビューの変更」タブで変更のプレビューを確認できます。ここに画像が表示されます。たとえばこのように、私の場合、

![](app/src/main/res/drawable/refrence_image.png)

appフォルダー-> srcフォルダー->メインフォルダー-> resフォルダー->ドローアブルフォルダー->そして、ドローアブルフォルダーの中にrefrence_image.pngファイルが配置されています。複数の画像を追加するには、次のようにします。

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

注1-画像ファイル名にスペースが含まれていないことを確認してください。スペースが含まれている場合は、ファイル名間のスペースごとに％20を追加する必要があります。スペースを削除することをお勧めします。

注2-HTMLタグを使用して画像のサイズを変更することもできますが、他の方法もあります。あなたはもっとそれをググることができます。必要な場合。

この後、変更のコミットメッセージを書き込んでから、変更をコミットします。

他にも、問題を作成したり、問題を作成したりするなど、多くのハックがあります。これは、私が遭遇した最善の方法です。

簡単にできます

• GitHubで新しい問題を作成する
• div課題の本文に画像をドラッグアンドドロップする

数秒後、リンクが生成されます。次に、リンクまたは画像のURLをコピーして、サポートされている任意のプラットフォームで使用します。

アップロードファイルオプションからREADMEファイルにリポジトリに画像を追加します

![Alt text]("enter repository image URL here") 

私が言及していない、もう1つのオプションがあります。ユーザーまたは組織の下に「アセット」と呼ばれる別のリポジトリを作成するだけです。画像をこのリポジトリにプッシュして、他のリポジトリから参照します。

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

私は私のリポジトリの 1つでこれを実行しました。コードとは関係なく、すべてのプロジェクトのREADMEイメージをバージョン管理できますが、すべて1 か所に保管できます。問題や分岐、またはその他の簡単に見当違いのアーティファクトは必要ありません。