最近GitHubに参加しました。私はそこでいくつかのプロジェクトを主催しました。
READMEファイルにいくつかの画像を含める必要があります。どうすればいいのかわかりません。
これについて検索しましたが、「Webで画像をホストし、README.mdファイルで画像パスを指定する」というリンクしかありませんでした。
サードパーティのウェブホスティングサービスで画像をホストせずにこれを行う方法はありますか？
1552385 次
37 に答える
2790
このマークダウンを試してください：
リポジトリに保存されている場合は、画像の未加工バージョンに直接リンクできると思います。すなわち
于 2013-01-24T05:46:32.903 に答える
741
次のような相対パスを使用することもできます
また、希望するもので次を試してください.fileExtention：
于 2015-10-08T03:18:44.150 に答える
355
- 新しい問題を作成できます
- 画像をアップロード（ドラッグアンドドロップ）します
- 画像のURLをコピーして、README.mdファイルに貼り付けます。
これは、これを詳細に説明した詳細なyouTubeビデオです。
于 2014-10-28T06:03:35.527 に答える
224
それよりもはるかに簡単です。
画像をリポジトリルートにアップロードし、次のようにパスなしでファイル名にリンクするだけです。
于 2016-07-08T20:07:04.563 に答える
117
単純な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>
于 2016-01-30T04:45:29.037 に答える
73
投稿されたソリューションの多くは不完全であるか、私の好みではありません。
- imgurのような外部CDNは、チェーンに別のツールを追加します。まあ。
- 課題トラッカーでダミーの課題を作成するのはハックです。それは混乱を引き起こし、ユーザーを混乱させます。このソリューションをフォークに移行するか、GitHubから移行するのは面倒です。
- gh-pagesブランチを使用すると、URLが脆弱になります。gh-pageを維持するプロジェクトに取り組んでいる別の人は、これらの画像へのパスに応じて、外部の何かを知らない可能性があります。gh-pagesブランチは、CDNイメージをホストするために必要ではないGitHubで特定の動作をします。
- バージョン管理でアセットを追跡するのは良いことです。プロジェクトが成長し、変化するにつれて、複数のユーザーによる変化を管理および追跡するためのより持続可能な方法になります。
- 画像がソフトウェアの特定のリビジョンに適用される場合は、不変の画像をリンクすることが望ましい場合があります。そうすれば、ソフトウェアへの変更を反映するためにイメージが後で更新された場合、そのリビジョンのreadmeを読んでいる人は誰でも正しいイメージを見つけることができます。
この要点に触発された私の好ましい解決策は、特定のリビジョンへのパーマリンクを備えたアセットブランチを使用することです。
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ヘルプページから、ファイルビューにブランチの最新バージョンが表示されます）
于 2017-03-08T17:13:28.980 に答える
34
画像（image.png）をフォルダ（myFolder ）にコミットし、 README.mdに次の行を追加します。
于 2017-06-14T10:01:01.720 に答える
33
READMEファイルにいくつかの画像を含める必要があります。どうすればいいのかわかりません。
GitHubリポジトリのreadme用にシンプルな画像ギャラリーを作成およびカスタマイズできる小さなウィザードを作成しました。ReadmeGalleryCreatorForGitHubを参照してください。
ウィザードは、GitHubでimgタグをで使用できるという事実を利用していますREADME.md。また、ウィザードは、画像を問題領域にドラッグアンドドロップすることでGitHubに画像をアップロードするという一般的なトリックを利用します（このスレッドの回答の1つですでに述べたように）。
于 2015-09-25T20:48:40.187 に答える
29
他の形式と同じように、アニメーション化されたSVG画像をマークダウンファイルに挿入することもできます。
これは、GIF画像の優れた代替手段になる可能性があります。
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>
assets例（イメージがリポジトリ内のディレクトリにあると仮定）：
結果：
于 2021-10-11T08:46:57.090 に答える
23
- 画像の追加に関する問題を作成する
- ドラッグアンドドロップまたはファイルチューザーで画像を追加します
次に、画像ソースをコピーします
次に、README.mdファイルに追加します
終わり！
または、のような画像ホスティングサイトを使用して、imgurそのURLを取得し、README.mdファイルに追加するか、静的ファイルホスティングを使用することもできます。
于 2016-10-12T19:02:31.070 に答える
22
基本構文
ここ：
- my-image-alt-tag：画像が表示されていない場合に表示されるテキスト。
- url-to-image：画像リソースが何であれ。画像のURI
例：
これは次のようになります。
于 2016-01-21T16:09:00.920 に答える
18
<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
ここを観察する
于 2018-03-25T20:27:44.150 に答える
17
これで、readmeファイルの編集中に画像をドラッグアンドドロップできます。
Githubは、次の形式のリンクを作成します。
https://user-images.githubusercontent.com/******/********.file_format
または、ファイルの下部に「ファイルをドラッグアンドドロップ、選択、または貼り付けて添付してください」と表示されます。それをクリックすると、ファイルを直接アップロードするか、貼り付けるかを選択できます。
于 2021-03-01T17:52:27.577 に答える
14
ステップバイステップのプロセスでは、最初にフォルダを作成し（フォルダに名前を付けます）、アップロードする画像をReadme.mdファイルに追加します。（プロジェクトの既存のフォルダーに画像を追加することもできます。）次に、Readme.mdファイルの編集アイコンをクリックしてから、
 // refrence_image is the name of image in my case.
画像を追加した後、[変更のプレビュー]タブで変更のプレビューを確認できます。ここに画像が表示されます。たとえば、このように、私の場合、
appフォルダー->srcフォルダー->メインフォルダー->resフォルダー->ドローアブルフォルダー->ドローアブルフォルダー内refrence_image.pngファイルがあります。複数の画像を追加する場合は、次のように行うことができます。
注1-画像ファイル名にスペースが含まれていないことを確認してください。スペースが含まれている場合は、ファイル名の間のスペースごとに％20を追加する必要があります。スペースを削除することをお勧めします。
注2-HTMLタグを使用して画像のサイズを変更することもできますが、他の方法もあります。あなたはそれをもっとググることができます。あなたがそれを必要とするならば。
この後、変更のコミットメッセージを書き込んでから、変更をコミットします。
他にも、問題を作成したり、問題を作成したりするなど、他にも多くのハックがあります。これは、私が遭遇した中で最も優れた方法です。
于 2020-05-25T10:07:03.507 に答える
13
テーブルを使って目立たせてください、それはそれに別の魅力を与えます
テーブル構文は次のとおりです。
各列のセルを記号で区切ります|
とテーブルヘッダー（最初の行）による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
于 2019-03-04T03:38:17.473 に答える
13
使用できます
![A test image]代替テキストはどこにあり(image.png)、画像へのリンクです。
クラウドサービスまたは他のオンライン画像ホスティングプラットフォームに画像を配置するか、リポジトリにある場合はリポジトリから画像リンクを提供することができます
リポジトリ内にreadme画像専用の特定のフォルダを作成することもできます
于 2021-04-11T07:23:05.667 に答える
11
新しいGithubUIでは、これは私のために機能します-
例-image.pngをフォルダー（myFolder）にコミットし、README.mdに次の行を追加します。
于 2020-07-16T06:49:56.000 に答える
10
あなたはただすることができます：
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ようにファイルで参照できます。
于 2018-12-13T23:10:35.040 に答える
9
これだけで動作します!!
タグの大文字のファイル名に注意し、PNGファイルをルートに入れ、パスなしでファイル名にリンクします。
于 2018-08-14T18:10:16.750 に答える
9
非常にシンプル：Ctrl + C/Vを使用して実行できます
ここでの回答のほとんどは、直接的または間接的に画像を別の場所にアップロードしてから、その画像へのリンクを提供することを含みます。
Readme.mdの編集中に画像をコピーして貼り付けるだけで、非常に簡単に実行できます。
- 画像のコピー-画像ファイルをクリックして使用する
Ctrl + Cか、SnippingToolを使用してスクリーンショット画像をクリップボードにコピーすることができます Ctrl + Vその後、 Readme.mdの編集中に簡単に行うことができます
Guithubはそれをuser-images.githubusercontent.comに自動的にアップロードし、そこへのリンクが挿入されます
于 2021-12-13T14:34:22.980 に答える
8
私は通常、サイトで画像をホストしています。これは、ホストされている任意の画像にリンクできます。これをreadmeに入れてください。ファイルで動作し.rstますが、よくわかりません.md
.. image:: https://url/path/to/image
:height: 100px
:width: 200 px
:scale: 50 %
于 2015-05-12T17:15:56.547 に答える
8
私の場合、私はimgurを使用し、この方法で直接リンクを使用します。
于 2016-12-13T02:00:44.080 に答える
8
代替の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リンク
CDNリンクを使用して、（画像としてレンダリング）を使用してファイルにリンクできます。
https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg
埋め込み画像の例：
これにより、プロジェクトの画像をREADME.mdファイルとPyPiプロジェクトのreStructredTextドキュメント（ここ）の両方で使用できます。
于 2018-02-10T16:52:08.857 に答える
7
私はこの問題を解決しました。他の人のreadmeファイルを参照するだけで済みます。
まず、画像ファイルをgithubコードライブラリにアップロードする必要があります。次に、画像ファイルのアドレスを直接参照します。
于 2016-02-25T03:04:26.610 に答える
7
この回答は、 https ：//github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.mdにもあります。
以下を使用してリポジトリから画像を表示します。
ドメインを付加する：https ：//raw.githubusercontent.com/
フラグを追加：?sanitize=true&raw=true
<img />タグを使用
例のURLは、以下を使用してsvg、png、およびjpgで機能します。
- ドメイン：
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
于 2018-12-27T00:21:51.260 に答える
7
これを行う簡単な方法は2つあります。
1）HTML imgタグを使用し、
2）！[]（画像が保存されるパス/image-name.png）
その画像を開いている間に、ブラウザのURLからパスをコピーできます。間隔の問題が発生する可能性があるため、2ワードのパスまたは画像名add->％20の間にスペースがあるかどうかを確認してください。ブラウザと同じように。
どちらも機能します。詳しく知りたい場合は、私のgithubを確認してください-> https://github.com/adityarawat29
于 2019-03-03T09:19:04.280 に答える
5
私の場合、印刷画面を上Githubだけでなく上にも表示したかったのNPMです。相対パスの使用は内部では機能しGithubていましたが、外部では機能していませんでした。基本的に、プロジェクトをプッシュしNPMても（同じものを使用しているだけですがreadme.md、画像は表示されませんでした）。
私はいくつかの方法を試しましたが、最後にこれが私のために働いたものです：
NPMこれで、パッケージを公開できる場所またはその他の場所に画像が正しく表示されます。
于 2016-07-27T23:31:19.320 に答える
5
ドキュメント用に写真をアップロードする必要がある場合は、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を使用して、上記のマークダウン構文を使用してそれらを含めることができます。
例：この写真を使用するとします。次に、マークダウン構文を使用できます。
于 2017-11-18T21:07:13.593 に答える
5
すでに受け入れられている回答に例を拡張または追加しているだけです。
画像をGithubリポジトリに配置したら。
それで：
- ブラウザで対応するGithubリポジトリを開きます。
- ターゲット画像ファイルに移動し、新しいタブで画像を開きます。
- URLをコピーします
- そして最後に次のパターンにURLを挿入します
私の場合は
どこ
shadmazumder私ですusernameXcodeそれはprojectnamemasterそれはbranchInOnePicture.pngは、image私の場合InOnePicture.pngはルートディレクトリにあります。
于 2018-08-29T19:40:30.110 に答える
4
最新
Wikiは、PNG、JPEG、またはGIF画像を表示できます
これで、次を使用できます。
[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]
-また-
次の手順を実行します：
GitHubで、リポジトリのメインページに移動します。
リポジトリ名の下で、Wikiをクリックします。
Wikiサイドバーを使用して、変更するページに移動し、[編集]をクリックします。
Wikiツールバーで、[画像]をクリックします。
[画像の挿入]ダイアログボックスで、画像のURLと代替テキスト（検索エンジンとスクリーンリーダーで使用されます）を入力します。
[OK]をクリックします。
ドキュメントを参照してください。
于 2018-01-23T09:01:07.840 に答える
4
私は別の解決策を見つけましたが、まったく異なり、それを説明します
基本的にはタグを使って画像を表示していましたが、画像をクリックしたときに別のページに移動したかったので、次のようにしました。
<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />
改行で区切って並べると、画像をクリックすると、リダイレクトしたい他のサイトへのhrefが付いたタグに移動すると思います。
于 2019-07-17T05:18:23.153 に答える
3
table複数のスクリーンショットを追加する場合は、次のようにアクセシビリティを向上させるために表形式のデータを使用してそれらを整列させることを検討してください。
マークダウンパーサーがそれをサポートしている場合は、WIA-ARIA属性をTABLE要素に追加し、タグrole="presentation"を省略することもできます。th
于 2018-10-17T13:09:17.743 に答える
2
ファイルのアップロードオプションからリポジトリに画像を追加し、次にREADMEファイルに画像を追加します
![Alt text]("enter repository image URL here")
于 2020-01-18T10:16:25.657 に答える
2
私が言及していないさらに別のオプションがあります。ユーザーまたは組織の下に「アセット」と呼ばれる別のリポジトリを作成するだけです。画像をこのリポジトリにプッシュし、他のリポジトリから参照します。
私は自分のリポジトリの1つでこれを実行しましたが、これは私にぴったりです。コードに関係なく、すべてのプロジェクトのREADMEイメージをバージョン管理できますが、それでもすべてを1か所に保持できます。問題や分岐、またはその他の簡単に置き忘れるアーティファクトは必要ありません。
于 2020-03-24T07:39:42.183 に答える
1
これは簡単にできます。
- GitHubで新しい問題を作成する
divIssueの本文に画像をドラッグアンドドロップします
数秒後、リンクが生成されます。次に、リンクまたは画像のURLをコピーして、サポートされているプラットフォームを使用します。
于 2018-07-08T12:03:06.220 に答える
0
任意のWebサイトでホストされている画像（たとえば、URLは " http:// abc.def.com/folder/image.jpg"）を表示する場合は、README.mdファイルで次の構文を使用します。
- ブラウザで画像を参照するだけです（画像をクリックすることもできます）。自分や他の人のgithubでホストされている画像を含む任意のウェブサイトにすることができます。
- ブラウザのアドレスバーからURLをコピーします。これは、上記の構文で使用される「image_url」です。
独自のgithubリポジトリでホストされている画像の場合、上記のURL形式に加えて相対パスを使用できます
画像がファイルと同じフォルダにある
README.md場合（相対パスURLの特殊なケース）、次を使用できます。
URLを囲む山かっこ「<」と「>」に注意してください。URLが機能するためにこれらが必要になる場合があります。
于 2020-04-27T20:10:42.563 に答える
0
サイズ管理オプション付きの画像をアップロードする場合：
<img src="a.jpg" alt="a" width="200"/>
于 2021-10-12T20:32:58.133 に答える