web-dev-qa-db-ja.com

GithubリポジトリのREADMEにスクリーンショットを追加するにはどうすればいいですか？

GitHubリポジトリのREADMEファイルにスクリーンショットを配置することは可能ですか？構文は何ですか？

githubmarkdown
526
daisy

Markdown（README.md）を使用している場合

リポジトリに画像がある場合は、相対URLを使用できます。

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

他の場所にホストされている画像を埋め込む必要がある場合は、完全なURLを使用できます。

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHubでは、フォークされたリポジトリが正しくポイントされるように、相対リンクを?raw=trueパラメータと共に使用することをお勧めします。

raw=trueパラメータは、あなたがリンクするイメージを確実にするためにそこにあり、そのままレンダリングされます。これは、そのそれぞれのファイルのGitHubインターフェイス全体ではなく、画像だけがリンクされることを意味します。詳細については このコメント を参照してください。

例をチェックしてください： https://raw.github.com/altercation/solarized/master/README.md

また、READMEファイル内の相対リンクに関するドキュメント： https://help.github.com/articles/relative-links-in-readmes

そしてもちろん、値下げのドキュメントは/ http://daringfireball.net/projects/markdown/syntax です。

さらに、画像を保存するために新しいブランチscreenshotsを作成するなら、それらがmaster作業ツリーにあるのを避けることができます。

あなたはそれからそれらを埋め込むことができます：

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")
758
Paul

GitHubでreadmeに画像をアップロードする別の方法を追加したいと思っていますが、すでに受け入れられた答えがあります。

  • レポにissueを作成する必要があります
  • 画像をコメントエリアにドラッグアンドドロップします
  • 画像のリンクが生成されたら、それをあなたのreadmeに挿入してください。

あなたが見つけることができるより多くの詳細 ここ

62
user3941146

リポジトリ内の画像へのパスでは十分ではないことがわかりました。raw.github.comサブドメインの画像にリンクする必要がありました。

URLフォーマットhttps://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

マークダウンの例![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

52
Ryan

以下の1行があなたが探しているものです。

ファイルがリポジトリにある場合

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

ファイルが他の外部URLにある場合

![ScreenShot](https://{url})
20
mmcorrelo
  1. 画像をpostimage.orgにアップロードする
  2. MarkdownのURLを入手する
  3. ReadMeに挿入する
18
diju

画像を表示するためのマークダウン構文は確かに次のとおりです。

![image](https://{url})

しかし、 どうやってurlを提供するのですか？

  • あなたはおそらくあなたのリポジトリをスクリーンショットで散らばらせたくないでしょう、彼らはコードとは何の関係もありません。
  • 画像をWeb上で公開するという面倒に対処したくない場合もあります（サーバーにアップロードします）。

だから...あなたはgithub Hostをあなたの画像ファイルにするためにこの 素晴らしいトリック を使うことができます。 TDLR：

  1. レポのissueリストにissueを作成します
  2. この問題に関するあなたのスクリーンショットをドラッグアンドドロップします
  3. githubが作成したばかりのマークダウンコードをコピーする あなたの画像を表示する
  4. それをあなたのreadmeに貼り付けます

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/ /

16
edelans

これをREADMEに追加

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>
6
Dan Alboteanu

マークダウン： ![Screenshot](http://url/to/img.png)

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

  • それから画像ソースをコピー

  • README.mdファイルに![Screenshot](http://url/to/img.png)を追加してください

完了しました。

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

サンプル発行

3
abe312

URLを追加するよりもはるかに簡単に同じリポジトリに画像をアップロードするだけです。

![Screenshot](screenshot.png)

3
Taymour Niazi

まず、あなたが追加したいscreenshotsを含むディレクトリ（フォルダ）をあなたのローカルリポジトリのルートに作成してください。このディレクトリの名前をscreenshotsと呼びましょう。追加したい画像（JPEG、PNG、GIFなど）をこのディレクトリに置きます。

Android Studio Workspaceスクリーンショット

次に、各画像へのリンクをREADMEに追加する必要があります。そのため、私のスクリーンショットのディレクトリに1_ArtistsActivity.pngと2_AlbumsActivity.pngという名前の画像がある場合は、そのようにリンクを追加します。

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

各スクリーンショットを別々の行にしたい場合は、それらのリンクを別々の行に書いてください。ただし、すべてのリンクをスペースで区切って1行にまとめたほうがよいでしょう。実際には見栄えがよくないかもしれませんが、そうすることでGitHubが自動的にそれらを配置します。

最後に、変更をコミットしてプッシュします。

2
Zizoh

方法1 - >値下げ方法 

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

方法2 - > HTMLのやり方 

<img src="https://link(format same as above)" width="100" height="100"/>

または

<img src="https://link" style=" width:100px ; height:100px " />

注 - >画像のスタイルを設定したくない場合は、スタイル部分を削除してください。

2
shaurya uppal

私にとって最良の方法は -

  1. Githubでそのリポジトリに新しい問題を作成してから、gifフォーマットでファイルをアップロードしてください。ビデオファイルをgifフォーマットに変換するには、このWebサイトを使用することができます http://www.online-convert.com/
  2. 新しく作成した問題を送信してください。
  3. アップロードしたファイルのアドレスをコピーする
  4. 最後にあなたのREADMEファイルに入れて！[demo]（コピーしたアドレス）

これが役立つことを願っています。

0
Asifur Rahman