github - GitHubのREADME.mdに画像を追加するにはどうすればよいですか？

Question

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

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

これについて検索しましたが、「Webで画像をホストし、README.mdファイルで画像パスを指定する」というリンクしかありませんでした。

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

score 2790 · Accepted Answer

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

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

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

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

score 741 · Accepted Answer

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

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

また、希望するもので次を試してください.fileExtention：

![plot](./directory_1/directory_2/.../directory_n/plot.png)

score 355 · Accepted Answer

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

これは、これを詳細に説明した詳細なyouTubeビデオです。

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

score 224 · Accepted Answer

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

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

![Screenshot](screenshot.png)

score 117 · Accepted Answer

単純な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>

score 73 · Accepted Answer

投稿されたソリューションの多くは不完全であるか、私の好みではありません。

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

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

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

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

score 34 · Accepted Answer

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

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

score 33 · Accepted Answer

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

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

ウィザードは、GitHubでimgタグをで使用できるという事実を利用していますREADME.md。また、ウィザードは、画像を問題領域にドラッグアンドドロップすることでGitHubに画像をアップロードするという一般的なトリックを利用します（このスレッドの回答の1つですでに述べたように）。

score 29 · Accepted Answer

他の形式と同じように、アニメーション化されたSVG画像をマークダウンファイルに挿入することもできます。
これは、GIF画像の優れた代替手段になる可能性があります。

![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>

assets例（イメージがリポジトリ内のディレクトリにあると仮定）：

![My animated logo](assets/my-logo.svg)

結果：

score 23 · Accepted Answer

画像の追加に関する問題を作成する
ドラッグアンドドロップまたはファイルチューザーで画像を追加します
次に、画像ソースをコピーします
![alt tag](http://url/to/img.png)次に、README.mdファイルに追加します

終わり！

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

サンプルの問題

score 22 · Accepted Answer

基本構文

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

ここ：

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

例：

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

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

score 18 · Accepted Answer

<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

ここを観察する

score 17 · Accepted Answer

これで、readmeファイルの編集中に画像をドラッグアンドドロップできます。

Githubは、次の形式のリンクを作成します。

https://user-images.githubusercontent.com/******/********.file_format

または、ファイルの下部に「ファイルをドラッグアンドドロップ、選択、または貼り付けて添付してください」と表示されます。それをクリックすると、ファイルを直接アップロードするか、貼り付けるかを選択できます。

score 14 · Accepted Answer

ステップバイステップのプロセスでは、最初にフォルダを作成し（フォルダに名前を付けます）、アップロードする画像を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タグを使用して画像のサイズを変更することもできますが、他の方法もあります。あなたはそれをもっとググることができます。あなたがそれを必要とするならば。

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

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

score 13 · Accepted Answer

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

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

各列のセルを記号で区切ります|

とテーブルヘッダー（最初の行）による2番目の行による ---

| col 1 | col 2 |
| ------------ | ------------- |
| 画像1| 画像2|

出力

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

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

例

| col 1 | col 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

score 13 · Accepted Answer

使用できます

![A test image](image.png)

![A test image]代替テキストはどこにあり(image.png)、画像へのリンクです。

クラウドサービスまたは他のオンライン画像ホスティングプラットフォームに画像を配置するか、リポジトリにある場合はリポジトリから画像リンクを提供することができます

リポジトリ内にreadme画像専用の特定のフォルダを作成することもできます

score 11 · Accepted Answer

新しいGithubUIでは、これは私のために機能します-

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

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

score 10 · Accepted Answer

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

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)

score 9 · Accepted Answer

これだけで動作します!!

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

![Screenshot](screenshot.png)

score 9 · Accepted Answer

非常にシンプル：Ctrl + C/Vを使用して実行できます

ここでの回答のほとんどは、直接的または間接的に画像を別の場所にアップロードしてから、その画像へのリンクを提供することを含みます。

Readme.mdの編集中に画像をコピーして貼り付けるだけで、非常に簡単に実行できます。

画像のコピー-画像ファイルをクリックして使用するCtrl + Cか、SnippingToolを使用してスクリーンショット画像をクリップボードにコピーすることができます
Ctrl + Vその後、 Readme.mdの編集中に簡単に行うことができます

Guithubはそれをuser-images.githubusercontent.comに自動的にアップロードし、そこへのリンクが挿入されます

score 8 · Accepted Answer

私は通常、サイトで画像をホストしています。これは、ホストされている任意の画像にリンクできます。これをreadmeに入れてください。ファイルで動作し.rstますが、よくわかりません.md

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

score 8 · Accepted Answer

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

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

score 8 · Accepted Answer

代替のgithubCDNリンクを使用して、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ドキュメント（ここ）の両方で使用できます。

score 7 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

ドメインを付加する：https ：//raw.githubusercontent.com/

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

`<img />`タグを使用

例のURLは、以下を使用してsvg、png、およびjpgで機能します。

ドメイン：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

score 7 · Accepted Answer

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

1）HTML imgタグを使用し、

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

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

どちらも機能します。詳しく知りたい場合は、私のgithubを確認してください-> https://github.com/adityarawat29

score 5 · Accepted Answer

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

私はいくつかの方法を試しましたが、最後にこれが私のために働いたものです：

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

NPMこれで、パッケージを公開できる場所またはその他の場所に画像が正しく表示されます。

score 5 · Accepted Answer

ドキュメント用に写真をアップロードする必要がある場合は、git-lfsを使用することをお勧めします。git-lfsをインストールしたと仮定して、次の手順に従います。

各画像タイプのgitlfsを初期化します。

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

画像の場所として使用されるフォルダを作成します。doc。GNU / LinuxおよびUnixベースのシステムでは、これは次の方法で実行できます。
```
cd project_folder
mkdir doc
git add doc
```
画像をコピーしてdocフォルダに貼り付けます。その後、git addコマンドでそれらを追加します。
コミットしてプッシュします。
画像は次のURLで公開されています。

https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location in the repo ^

ここで、*^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)

score 5 · Accepted Answer

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

画像を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はルートディレクトリにあります。

score 4 · Accepted Answer

github - GitHubのREADME.mdに画像を追加するにはどうすればよいですか？

37 に答える 37

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

基本構文

ここ：

例：

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

非常にシンプル：Ctrl + C/Vを使用して実行できます

プロジェクトリンク

生のリンク

CDNリンク

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

ドメインを付加する：https ：//raw.githubusercontent.com/

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

<img />タグを使用

最新

Related

Reference

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

`<img />`タグを使用