GitHubのREADME.mdに画像を追加する
最近私は GitHub に参加しました。私はそこでいくつかのプロジェクトを主催しました。
READMEファイルにいくつかの画像を含める必要があります。その方法がわかりません。
これについて検索したのですが、「Web上で画像をホストし、README.mdファイルに画像パスを指定する」というリンクがあるだけです。
サードパーティのWebホスティングサービスで画像をホストせずにこれを行う方法はありますか？
この値下げを試してください。
リポジトリに保存されている場合は、画像の生のバージョンに直接リンクできると思います。すなわち.
編集： ghページの使用を示唆する記事へのコメントリンクに気付いた。また、相対リンクは私が上に投稿した絶対URLよりも良い考えになるかもしれません。
次のような相対パスも使用できます。
- あなたは新しい問題を作成することができます
- 画像をアップロード（ドラッグ＆ドロップ）します
- 画像のURLをコピーして、README.mdファイルに貼り付けます。
これが詳細に説明された詳細なyouTubeビデオです：
それよりずっと簡単です。
画像をリポジトリのルートにアップロードし、パスを指定せずにファイル名にリンクするだけです。
単純な 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ページを維持しているプロジェクトに取り組んでいる他の人は、これらの画像へのパスに依存する外部の何かを知らないかもしれません。 gh-pagesブランチはGitHub上で特別な振る舞いをしますが、これはCDNイメージをホストするのに必要ではありません。
- バージョン管理で資産を追跡するのは良いことです。プロジェクトが成長し変更されるにつれて、複数のユーザーによる変更を管理および追跡するためのより持続可能な方法となります。
- イメージがソフトウェアの特定のリビジョンに適用される場合は、不変イメージをリンクすることが望ましい場合があります。そうすれば、後でソフトウェアの変更を反映するようにイメージが更新された場合でも、そのリビジョンのreadmeを読む人は誰でも正しいイメージを見つけることができます。
this Gist に触発された私の推奨する解決策は、 assetsブランチ と のパーマリンク を使うことです。
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 needed below.
このリビジョンの画像への「パーマリンク」を作成し、それをMarkdownでラップします。
例えば.
Assetブランチに常に最新の画像を表示するには、shaの代わりにassetsを使用します。
コミット あなたの画像（ image.png ）をフォルダ（ myFolder ）に入れ、 README.md に次の行を追加します。
- 画像の追加に関する問題を作成する
- ドラッグアンドドロップまたはファイル選択で画像を追加します
それから画像ソースをコピー
README.mdファイルに
を追加してください
完了しました。
あるいは、imgurのような画像ホスティングサイトを使用してそのURLを取得してREADME.mdファイルに追加するか、静的ファイルホスティングも使用できます。
基本的な構文
ここに：
- my-image-alt-tag：画像が表示されていない場合に表示されるテキスト。
- url-to-image：あなたの画像リソースがなんであれ。画像のURI
例：
これは次のようになります。
あなたのREADME.mdに<img>タグをリポジトリの相対srcと共に追加するだけです。相対srcを使用していない場合は、サーバーがCORSをサポートしていることを確認してください。
GitHubが inline-html をサポートしているのでうまくいきます。
<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it
観察する ここ
READMEファイルにいくつかの画像を含める必要があります。その方法がわかりません。
GitHubリポジトリのreadme用の簡単な画像ギャラリーを作成してカスタマイズできる小さなウィザードを作成しました。 ReadmeGalleryCreatorForGitHub を参照してください。
このウィザードは、GitHubがimgタグをREADME.mdに含めることを許可するという事実を利用します。また、ウィザードはGitHubに画像をアップロードするという一般的なトリックを利用しています（既にこのスレッドの答えの1つで述べたように）。
私の場合、 imgur を使用し、この方法で直接リンクを使用します。
代わりの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文書化の両方で私のプロジェクトからの画像をどのように使うことができるかです（ 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を使う）にしたとしても、画像は表示されませんでした。
私はいくつかの方法を試してみました、最後にこれが私のために働いたものです：
NPM上、または自分のパッケージを公開できる他の場所に、私のイメージが正しく表示されるようになりました。
ドキュメンテーションのために写真をアップロードする必要がある場合は、 git-lfs を使用するのがいいでしょう。 git-lfsをインストールしたと仮定すると、次のステップに従ってください。
それぞれの画像タイプに合わせてgit lfsを初期化します。
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 docDocフォルダーに任意の画像をコピーして貼り付けます。その後それらを
git addコマンドで追加してください。コミットしてプッシュします。
画像は以下のURLで一般公開されています。
https://media.githubusercontent.com/media/ ^ github_username ^/^ repo ^/^支店^/^リポジトリ内のimage_location ^
* ^github_username^はgithubのユーザー名です（プロフィールページで見つけることができます） * ^repo_name^はリポジトリ名です * ^branch^は画像が保存されているリポジトリのブランチです。アップロードされた * ^image_location in the repo^は、画像が保存されているフォルダを含む場所です。
また、最初に画像をアップロードしてからプロジェクトのgithubページ内の場所に移動し、画像が見つかるまで移動してからdownloadボタンを押してから、ブラウザのアドレスバーからURLをコピーアンドペーストすることもできます。
参照として私のプロジェクトから これ を見てください。
それから、上記のマークダウン構文を使用してURLを使用してそれらを含めることができます。
例： this photo を使用したとします。それから、マークダウン構文を使用できます。
あなたはただすることができます：
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ファイルの中でそれを参照するだけです。
私は、すでに受け入れられている答えに例を拡張したり追加したりしています。
Githubレポジトリに画像を配置したら
その後：
- ブラウザで対応するGithubリポジトリを開きます。
- 目的の画像ファイルに移動して、新しいタブで画像を開くだけです。
![Opening the image in a new tab]()
- URLをコピーしてください
![Copy the url from the browser tab]()
- そして最後に次のパターンにURLを挿入してください
私の場合は
どこで
shadmazumderは私のusernameですXcodeはprojectnameですmasterはbranchですInOnePicture.pngはimageです、私の場合はInOnePicture.pngはルートディレクトリにあります。
目立つようにテーブルを使う、それはそれに別の魅力を与えるだろう
テーブルの構文は次のとおりです。
各列のセルを記号|で区切ります
---による2行目とテーブルヘッダー（最初の行）
|列1 |列2 |
| ------------ | ------------- |
|画像1 |画像2 |
output
2つの画像を使用している場合は、画像1と画像2に<img src="url/relativePath">を追加してください
注：複数の画像を使用する場合、さらに多くの列を含める場合は、widthおよびheight属性を使用して見やすくすることができます。
例
|列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
この回答は https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md にもあります。
以下を使用してレポから画像を表示します。
先頭にドメインを追加： https://raw.githubusercontent.com/ または https://cdn.rawgit.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?sanitize=true&raw=true" />
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />
**https://cdn.rawgit.com**:
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png" />
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg" />
raw.githubusercontent.com ：
ありがとう： - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/ edit/master/question.13808020.include-an-svg-github-in-markdown/readme.md
この作品だけ！
ファイル名を大文字で大文字にしてPNGファイルをルートに置き、パスなしでファイル名にリンクします。
これは簡単にできます。
- gitHubで新しい号を作成する
- 画像を本体にドラッグアンドドロップする
div
数秒後、リンクが生成されます。それでは、リンクまたは画像のURLをコピーして、サポートされている任意のプラットフォームで使用してください。
私は別の解決策を見つけましたが、まったく異なるので、それを説明します
基本的に、タグを使用して画像を表示しましたが、画像がクリックされたときに別のページに移動したかったので、次のようにしました。
<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]]
- または -
次の手順を実行します：
GitHubで、リポジトリのメインページに移動します。
リポジトリ名の下にある[Wiki]をクリックします。
Wikiサイドバーを使用して、変更したいページにナビゲートしてから、「編集」をクリックします。
Wikiツールバーで、 Image をクリックします。
- [画像の挿入]ダイアログボックスで、画像のURLと代替テキスト（検索エンジンとスクリーンリーダーによって使用される）を入力します。
- OKをクリックしてください。
ドキュメント を参照してください。
これを行うことができる2つの簡単な方法があります、
1）HTMLのimgタグを使う
2）！[]（あなたの画像が保存されているパス/ image-name.png）
その画像を開いている間にブラウザのURLからコピーできるパスです。スペースの問題が発生する可能性があるので、パス2ワードまたはイメージ名add->％20にスペースがあるかどうかを確認してください。ブラウザと同じように。
両方ともうまくいくでしょう、もっと理解したいのなら私のgithubをチェックしてください - > https://github.com/adityarawat29
複数のスクリーンショットを追加する場合はtableの使用を検討し、次に示すようにアクセシビリティを向上させるために表形式のデータを使用してそれらを位置合わせしたい場合があります。
もしあなたのマークダウンパーサがそれをサポートしていれば、role="presentation" WIA-ARIA属性をTABLE要素に追加し、thタグを省略することもできます。