最近GitHubに参加しました。私はそこでいくつかのプロジェクトを主催しました。
READMEファイルにいくつかの画像を含める必要があります。どうすればいいのかわかりません。
これについて検索しましたが、「Webで画像をホストし、README.mdファイルで画像パスを指定する」というリンクしかありませんでした。
サードパーティのウェブホスティングサービスで画像をホストせずにこれを行う方法はありますか?
最近GitHubに参加しました。私はそこでいくつかのプロジェクトを主催しました。
READMEファイルにいくつかの画像を含める必要があります。どうすればいいのかわかりません。
これについて検索しましたが、「Webで画像をホストし、README.mdファイルで画像パスを指定する」というリンクしかありませんでした。
サードパーティのウェブホスティングサービスで画像をホストせずにこれを行う方法はありますか?
このマークダウンを試してください:

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

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

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

これは、これを詳細に説明した詳細な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>
投稿されたソリューションの多くは不完全であるか、私の好みではありません。
この要点に触発された私の好ましい解決策は、特定のリビジョンへのパーマリンクを備えたアセットブランチを使用することです。
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ヘルプページから、ファイルビューにブランチの最新バージョンが表示されます)
画像(image.png)をフォルダ(myFolder )にコミットし、 README.mdに次の行を追加します。

READMEファイルにいくつかの画像を含める必要があります。どうすればいいのかわかりません。
GitHubリポジトリのreadme用にシンプルな画像ギャラリーを作成およびカスタマイズできる小さなウィザードを作成しました。ReadmeGalleryCreatorForGitHubを参照してください。
ウィザードは、GitHubでimgタグをで使用できるという事実を利用していますREADME.md
。また、ウィザードは、画像を問題領域にドラッグアンドドロップすることでGitHubに画像をアップロードするという一般的なトリックを利用します(このスレッドの回答の1つですでに述べたように)。
他の形式と同じように、アニメーション化されたSVG画像をマークダウンファイルに挿入することもできます。
これは、GIF画像の優れた代替手段になる可能性があります。

OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>
assets
例(イメージがリポジトリ内のディレクトリにあると仮定):

結果:
次に、画像ソースをコピーします

次に、README.mdファイルに追加します
終わり!
または、のような画像ホスティングサイトを使用して、imgur
そのURLを取得し、README.mdファイルに追加するか、静的ファイルホスティングを使用することもできます。
<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
ここを観察する
これで、readmeファイルの編集中に画像をドラッグアンドドロップできます。
Githubは、次の形式のリンクを作成します。
https://user-images.githubusercontent.com/******/********.file_format
または、ファイルの下部に「ファイルをドラッグアンドドロップ、選択、または貼り付けて添付してください」と表示されます。それをクリックすると、ファイルを直接アップロードするか、貼り付けるかを選択できます。
ステップバイステップのプロセスでは、最初にフォルダを作成し(フォルダに名前を付けます)、アップロードする画像をReadme.mdファイルに追加します。(プロジェクトの既存のフォルダーに画像を追加することもできます。)次に、Readme.mdファイルの編集アイコンをクリックしてから、
 // refrence_image is the name of image in my case.
画像を追加した後、[変更のプレビュー]タブで変更のプレビューを確認できます。ここに画像が表示されます。たとえば、このように、私の場合、

appフォルダー->srcフォルダー->メインフォルダー->resフォルダー->ドローアブルフォルダー->ドローアブルフォルダー内refrence_image.pngファイルがあります。複数の画像を追加する場合は、次のように行うことができます。



注1-画像ファイル名にスペースが含まれていないことを確認してください。スペースが含まれている場合は、ファイル名の間のスペースごとに%20を追加する必要があります。スペースを削除することをお勧めします。
注2-HTMLタグを使用して画像のサイズを変更することもできますが、他の方法もあります。あなたはそれをもっとググることができます。あなたがそれを必要とするならば。
この後、変更のコミットメッセージを書き込んでから、変更をコミットします。
他にも、問題を作成したり、問題を作成したりするなど、他にも多くのハックがあります。これは、私が遭遇した中で最も優れた方法です。
テーブルを使って目立たせてください、それはそれに別の魅力を与えます
テーブル構文は次のとおりです。
各列のセルを記号で区切ります|
とテーブルヘッダー(最初の行)による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
使用できます

![A test image]
代替テキストはどこにあり(image.png)
、画像へのリンクです。
クラウドサービスまたは他のオンライン画像ホスティングプラットフォームに画像を配置するか、リポジトリにある場合はリポジトリから画像リンクを提供することができます
リポジトリ内にreadme画像専用の特定のフォルダを作成することもできます
新しいGithubUIでは、これは私のために機能します-
例-image.pngをフォルダー(myFolder)にコミットし、README.mdに次の行を追加します。

あなたはただすることができます:
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
ようにファイルで参照できます。

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

ここでの回答のほとんどは、直接的または間接的に画像を別の場所にアップロードしてから、その画像へのリンクを提供することを含みます。
Readme.mdの編集中に画像をコピーして貼り付けるだけで、非常に簡単に実行できます。
Ctrl + C
か、SnippingToolを使用してスクリーンショット画像をクリップボードにコピーすることができますCtrl + V
その後、 Readme.mdの編集中に簡単に行うことができますGuithubはそれをuser-images.githubusercontent.comに自動的にアップロードし、そこへのリンクが挿入されます
私は通常、サイトで画像をホストしています。これは、ホストされている任意の画像にリンクできます。これをreadmeに入れてください。ファイルで動作し.rst
ますが、よくわかりません.md
.. image:: https://url/path/to/image
:height: 100px
:width: 200 px
:scale: 50 %
私の場合、私はimgurを使用し、この方法で直接リンクを使用します。

代替の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リンクを使用して、(画像としてレンダリング)を使用してファイルにリンクできます。
https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg
埋め込み画像の例:
これにより、プロジェクトの画像をREADME.md
ファイルとPyPiプロジェクトのreStructredTextドキュメント(ここ)の両方で使用できます。
この回答は、 https ://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.mdにもあります。
?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?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
これを行う簡単な方法は2つあります。
1)HTML imgタグを使用し、
2)
その画像を開いている間に、ブラウザのURLからパスをコピーできます。間隔の問題が発生する可能性があるため、2ワードのパスまたは画像名add->%20の間にスペースがあるかどうかを確認してください。ブラウザと同じように。
どちらも機能します。詳しく知りたい場合は、私のgithubを確認してください-> https://github.com/adityarawat29
私の場合、印刷画面を上Github
だけでなく上にも表示したかったのNPM
です。相対パスの使用は内部では機能しGithub
ていましたが、外部では機能していませんでした。基本的に、プロジェクトをプッシュしNPM
ても(同じものを使用しているだけですがreadme.md
、画像は表示されませんでした)。
私はいくつかの方法を試しましたが、最後にこれが私のために働いたものです:

NPM
これで、パッケージを公開できる場所またはその他の場所に画像が正しく表示されます。
ドキュメント用に写真をアップロードする必要がある場合は、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を使用して、上記のマークダウン構文を使用してそれらを含めることができます。

例:この写真を使用するとします。次に、マークダウン構文を使用できます。

すでに受け入れられている回答に例を拡張または追加しているだけです。
画像をGithubリポジトリに配置したら。
それで:

私の場合は

どこ
shadmazumder
私ですusername
Xcode
それはprojectname
master
それはbranch
InOnePicture.png
は、image
私の場合InOnePicture.png
はルートディレクトリにあります。Wikiは、PNG、JPEG、またはGIF画像を表示できます
これで、次を使用できます。
[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]
-また-
次の手順を実行します:
GitHubで、リポジトリのメインページに移動します。
リポジトリ名の下で、Wikiをクリックします。
Wikiサイドバーを使用して、変更するページに移動し、[編集]をクリックします。
Wikiツールバーで、[画像]をクリックします。
[画像の挿入]ダイアログボックスで、画像のURLと代替テキスト(検索エンジンとスクリーンリーダーで使用されます)を入力します。
[OK]をクリックします。
ドキュメントを参照してください。
私は別の解決策を見つけましたが、まったく異なり、それを説明します
基本的にはタグを使って画像を表示していましたが、画像をクリックしたときに別のページに移動したかったので、次のようにしました。
<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />
改行で区切って並べると、画像をクリックすると、リダイレクトしたい他のサイトへのhrefが付いたタグに移動すると思います。
table
複数のスクリーンショットを追加する場合は、次のようにアクセシビリティを向上させるために表形式のデータを使用してそれらを整列させることを検討してください。
マークダウンパーサーがそれをサポートしている場合は、WIA-ARIA属性をTABLE要素に追加し、タグrole="presentation"
を省略することもできます。th
ファイルのアップロードオプションからリポジトリに画像を追加し、次にREADMEファイルに画像を追加します

私が言及していないさらに別のオプションがあります。ユーザーまたは組織の下に「アセット」と呼ばれる別のリポジトリを作成するだけです。画像をこのリポジトリにプッシュし、他のリポジトリから参照します。

私は自分のリポジトリの1つでこれを実行しましたが、これは私にぴったりです。コードに関係なく、すべてのプロジェクトのREADMEイメージをバージョン管理できますが、それでもすべてを1か所に保持できます。問題や分岐、またはその他の簡単に置き忘れるアーティファクトは必要ありません。
これは簡単にできます。
div
Issueの本文に画像をドラッグアンドドロップします数秒後、リンクが生成されます。次に、リンクまたは画像のURLをコピーして、サポートされているプラットフォームを使用します。
任意のWebサイトでホストされている画像(たとえば、URLは " http:// abc.def.com/folder/image.jpg
")を表示する場合は、README.md
ファイルで次の構文を使用します。

独自のgithubリポジトリでホストされている画像の場合、上記のURL形式に加えて相対パスを使用できます

README.md
場合(相対パスURLの特殊なケース)、次を使用できます。
URLを囲む山かっこ「<」と「>」に注意してください。URLが機能するためにこれらが必要になる場合があります。
サイズ管理オプション付きの画像をアップロードする場合:
<img src="a.jpg" alt="a" width="200"/>