web-dev-qa-db-ja.com

GitHubのREADME.mdに画像が表示されない

以下のマークダウンを使用して、リポジトリのREADME.mdに画像を追加しようとしています。

![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)

しかし、リポジトリにアクセスしても画像は表示されません。代わりに、画像へのリンクが表示されます。リンクをクリックすると、新しいウィンドウで画像が開きます。

また、相対パスを使用してみました：

![ScreenShot](screenshot.jpg)

しかし、これはページが見つからないというエラーを提供しています。

README.mdに画像を表示するための正しいマークダウンは何ですか

README.mdとイメージファイルの両方が同じパス/ディレクトリにあります。

Github README.mdで画像を表示する正しい方法は何ですか？

README.mdファイルの完全なコンテンツは次のとおりです。

Voice-controlled-MP3-Player
===========================

A MP3 player which accept voice command like PLAY, PAUSE, FORWARD, etc. Using C# and Microsoft Speech API.

![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)
imageurlgithub
42
AnonGeek

更新されたコンテンツ

2013年1月30日以降、GitHubはマークアップドキュメントの相対リンクをサポートするようになりました。

これは、コード![ScreenShot](screenshot.jpg)が問題なく動作することを意味します。

@Bradが指摘したように、これにより、画像が2つのブランチで異なるが同じことを行うシナリオが容易になる場合があります。その場合、1つのブランチから別のブランチに切り替えると、レンダリングされたビューの画像が動的に切り替えられるため、Readmeコンテンツを変更する必要はありません。

GitHubが相対リンクをサポートしていなかったときの以前の回答

生のurl形式を使用する必要があります。あなたの場合は https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg

これは、正しいマークダウンが次のようになることを意味します

![ScreenShot](https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg)

Githubの.mdfileでこれを使用すると、次の画像が表示されます;-)

ScreenShot

コメントに従って更新

rawを使用する必要があると公式に文書化されているのは...どこにも見つかりませんでした

このURL形式は、GitHubサイトの文書化されていない機能です。これは、後で変更される可能性があることを意味します。それが発生した場合、新しいフォーマットを「再発見」するために、画像を表示するときにRawボタンをクリックします。これにより、ブラウザで画像が「開き」ます。 URLをコピーしてVoilà！

raw

注：リポジトリはGitHubでホストされなくなりましたが、新しいを反映するようにURLを更新しました GitHubポリシーユーザーコンテンツに関する

66
nulltoken

相対URLを使用する必要があります。そうすれば、プライベートリポジトリでもうまく機能します。

![ScreenShot](/screenshots/latest.png)

リポジトリのスクリーンショットフォルダー内にlatest.pngがあるとします。

〜B

31
bosky101

相対URLが画像で機能するように、段落タグ内にラップします。

特に単一の画像で作業しているとき、私は問題に直面していました。

例：

<p>
    <img src="relativePath/file.png" width="220" height="240" />
</p>
7
Rakesh Yembaram

これは、以前の回答とは関係ない場合があります。私はOPと同じ質問があります-私はここで指示されましたが、それは私を助けませんでした。しかし、この質問に光を加える手助けができることを願っています-画像がREADME.mdファイル。

私が遭遇したissueは、ファイル名README.mdファイルはreadMEとして書き込まれます

欠落している.mdその書き方も異なります。

どうやら、README.mdファイル。アップロードする画像またはgifをgithubでレンダリングするには、そのファイルの元の名前である必要がありますREADME.mdページ。私がやったように、これがまれに、誰かに役立つことを願っています。

1
Gel Sisaed

サイドノート、reStructuredTextを使用する場合：

.. image:: /screenshots/latest.png?raw=true
0
brianray