680

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

4

20 に答える 20

942

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

SVGを使用する場合は、sanitize属性も次のように設定する必要がありtrueます?raw=true&sanitize=true。（@EliShererに感謝します）

また、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")
于 2012-04-17T10:22:08.547 に答える
85

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

  • リポジトリに問題を作成する必要があります
  • 画像のコメント領域にドラッグアンドドロップします
  • 画像のリンクが生成されたら、それをreadmeに挿入します

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

于 2015-07-21T03:15:19.183 に答える
55

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

URL形式https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

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

于 2012-10-21T11:47:35.067 に答える
44

2020年6月3日：ワーキングアンサー-

  1. 画像をpostimage.orgにアップロードします
  2. 画像をアップロードした後、Github-Markdown-Urlをコピー します
  3. ReadMeに挿入します
于 2016-11-18T19:33:57.180 に答える
23

下の1行はあなたが探しているものでなければなりません

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

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

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

![ScreenShot](https://{url})
于 2013-05-26T20:09:17.493 に答える
18

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

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

しかし：どのように提供するのurlですか？

  • あなたはおそらくあなたのリポジトリをスクリーンショットで乱雑にしたくないでしょう、彼らはコードとは何の関係もありません
  • 画像をWeb上で利用できるようにする煩わしさにも対処したくない場合があります...（サーバーにアップロードします...）。

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

  1. リポジトリの問題リストに問題を作成します
  2. この問題のスクリーンショットをドラッグアンドドロップします
  3. 画像を表示するためにgithubが作成したマークダウンコードをコピーします
  4. あなたのreadme（またはあなたが望むところならどこでも）にそれを貼り付けてください

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

于 2015-08-27T14:50:50.580 に答える
10

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

![Screenshot](screenshot.png)

于 2018-01-30T11:33:28.007 に答える
8

これをREADMEに追加します

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>
于 2018-03-08T17:16:55.637 に答える
6

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

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

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

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

終わり！

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

サンプルの問題

于 2016-10-12T19:16:53.137 に答える
6

方法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 " />

注->画像のスタイルを設定したくない場合、つまりサイズ変更したくない場合は、スタイル部分を削除します

于 2017-08-17T14:44:21.973 に答える
5

2021年3月から、これがサポートされるようになりました。

マークダウンファイルへのファイルの添付

Webで編集しているときに、画像を含むファイルをマークダウンファイルに添付できるようになりました。

これは、課題やプルリクエストの添付ファイルと同じように機能し、同じファイルタイプをサポートします。

ドラッグしてドラッグするか、クリックして選択するか、貼り付けるだけです。

ドロップしてgifをアップロードします-https://i1.wp.com/user-images.githubusercontent.com/7900087/109347520-25045d00-7828-11eb-9609-ee96b396eb65.gif?ssl=1

注：マークダウンファイルに画像を追加すると、マークダウンファイルがプライベートリポジトリにある場合でも、誰でも認証なしで匿名化された画像のURLを表示できます。
画像をプライベートに保つには、認証が必要なプライベートネットワークまたはサーバーから画像を提供します。匿名化されたURLの詳細については、「匿名化された画像のURLについて」を参照してください。

于 2021-03-03T22:28:05.513 に答える
4

この4つのステップを休ませてください、これは私のために働きました

1-GitHubで新しい問題を作成します。2-コメントフィールドに画像をドラッグアンドドロップするか、写真をアップロードします。3-アップロードプロセスが完了するのを待ちます。4-URLをコピーし、GitHubのMarkdownファイルで使用します（リポジトリのreadmeで生成されたURLを使用します）。

于 2022-01-23T07:18:12.523 に答える
3

![ScreenShot](screenshot.png)上記の多くで言及されているように、readmeマークダウンを追加します。screenshot.pngを、リポジトリにアップロードした画像の名前に置き換えます。

しかし、画像をアップロードするときの初心者向けのヒントを次に示します（私がこの間違いを自分で犯したため）。

画像名にスペースが含まれていないことを確認してください。元の画像は「スクリーンショット日月年id.png」として保存されました。名前をcontentofimage.pngのような名前に変更しないと、readmeファイルに画像として表示されません。

于 2020-10-06T01:10:55.023 に答える
2

私はいくつかの同様の質問をグーグルで検索しましたが、私の問題とその非常に単純で簡単な解決策についての答えは見つかりませんでした。

GoogleCloudStorage-READMEの画像へのわずかに異なるアプローチ

OPのように、Github READMEに画像が必要で、そのためのMarkdown構文を知っているので、次のように入力しました。

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

これを機能させるには、上記の実際の置換（MY_IMAGE = image.jpgなど）を完了する必要があります。

しかし、待ってください...失敗-実際にレンダリングされた写真はありません！そして、リンクはグーグルストレージによって与えられたものとまったく同じです！

失敗したGithub画像のアップロードのスクリーンショット

Github-camo匿名画像

Githubは画像を匿名でホストします。ただし、これにはGoogleストレージアセットの問題があります。生成されたURLをGoogleCloudConsoleから取得する必要があります。

よりスムーズな方法があると確信していますが、指定されたURLエンドポイントにアクセスして、長いURLをコピーするだけです。詳細：

指示

  1. ストレージコンソールにアクセスします：https ： //console.cloud.google.com/storage/browser/ $ {MY_BUCKET}？project = $ {MY_PROJECT}
  2. Githubに表示したい画像をクリックします（これにより、[オブジェクトの詳細]ページが表示されます）
  3. httpsそのURL（ notで始まるものgs）のパスタを新しいブラウザのタブ/ウィンドウにコピーします
  4. 新しく生成されたURL（長くする必要があります）を新しいブラウザのタブ/ウィンドウからGithubREADMEファイルにコピーします

うまくいけば、これは他の人のためにこの問題をスピードアップして明確にするのに役立ちます。

于 2020-01-03T17:31:24.350 に答える
2

私にとって、相対的なパスは非常にうまくいきました。

方法： 別のディレクトリの画像を使用したい現在のmdファイルでは、次のような相対パスを使用しました。次の点を考慮してください。

mdファイルの場所：base dir -> _post -> current_file.md

＆私が使用したかった画像ファイルの場所：base dir -> _asset -> picture_to_use.jpeg

私が使用したステートメントはcurrent_file.mdファイルにありました：

![your-pic-caption-name](../_asset/picture_to_use.jpeg)

注-これまでは直接使用して_assetいましたが、理想的には../_asset/and-so-no

参照-https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-readmes

于 2021-09-09T12:57:52.623 に答える
1

まず、ローカルリポジトリのルートに、screenshots追加するディレクトリ（フォルダ）を作成します。このディレクトリの名前を呼びましょうscreenshots。追加する画像（JPEG、PNG、GIFなど）をこのディレクトリに配置します。

AndroidStudioワークスペースのスクリーンショット

次に、各画像へのリンクを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が自動的にそれらを配置します。

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

于 2018-04-02T14:23:51.363 に答える
0

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

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

これがお役に立てば幸いです。

于 2016-11-27T22:19:04.037 に答える
0

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

![Alt text]("enter image url of repositoryhere")
于 2019-12-23T11:58:24.363 に答える
0

右上隅にある緑色のボタンをクリックして、新しい問題を作成します。必要なもののスクリーンショットを撮り、それを問題メッセージ（Macの場合はCMD + V、Windowsの場合はCTR + V）に貼り付けます。

于 2021-10-22T08:07:53.223 に答える
-5

ディレクトリにある画像を使用します/screen-shots。アウター<div>は画像を配置することを可能にします。パディングはを使用して実現され<img width="desired-padding" height="0">ます。

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>
于 2014-09-24T11:34:33.640 に答える