GitHub README.md に画像を直接埋め込む
最近、GitHub に参加し、いくつかのプロジェクトをそこでホストし始めました。私が遭遇したタスクの 1 つは、README ファイルに画像を含める必要があるということでした。
解決策を探したにもかかわらず、見つかったのは、サードパーティの Web サービスで画像をホストし、そこにリンクするという提案だけでした。外部ホスティングに依存せずに画像を直接追加する方法はありますか?
| 指示 | 説明 |
|---|---|
| base64.b64encode() | バイナリ データを Base64 文字列にエンコードします。Markdown に画像を直接埋め込む場合に便利です。 |
| .decode() | Base64 バイトを文字列に変換し、HTML/Markdown に埋め込めるようにします。 |
| with open("file", "rb") | 画像データの読み取りに必要なバイナリ読み取りモードでファイルを開きます。 |
| read() | ファイルの内容を読み取ります。ここでは、エンコード用の画像データを読み取るために使用されます。 |
| write() | データをファイルに書き込みます。ここでは、Base64 でエンコードされた文字列をテキスト ファイルに出力するために使用されます。 |
| f-string | 文字列リテラル内に式を埋め込むための Python 構文。エンコードされた画像を HTML img タグに埋め込むために使用されます。 |
GitHub README.md に画像を埋め込む方法
上記のスクリプトは、サードパーティのホスティング サービスに依存せずに GitHub README.md ファイルに画像を追加するさまざまな方法を示しています。最初のスクリプトでは、 base64.b64encode() 画像を Base64 でエンコードされた文字列に変換します。この方法は、README ファイル内に直接画像を埋め込むことができるため便利です。の with open("image.png", "rb") コマンドはバイナリ読み取りモードでイメージ ファイルを開き、スクリプトがイメージ データを読み取ることができるようにします。の encoded_string = base64.b64encode(image_file.read()).decode() line は、画像データを Base64 文字列にエンコードし、HTML への埋め込みに適した形式にデコードします。最後に、スクリプトはこのエンコードされた文字列を HTML としてフォーマットされたテキスト ファイルに書き込みます。 鬼ごっこ。
2 番目のスクリプトは、GitHub の raw URL 機能を使用して画像を埋め込む方法を示しています。画像をリポジトリに直接アップロードし、生の URL をコピーすると、README.md ファイルでこの URL を参照できます。コマンド  は、Markdown で画像リンクをフォーマットする方法を示しています。この方法は簡単で追加のエンコードは必要ありませんが、リポジトリで利用可能なイメージに依存します。 3 番目の方法では、相対パスを使用して、リポジトリに保存されているイメージを参照します。画像を特定のディレクトリにアップロードした後、相対パスを使用できます。  README.md にあります。このアプローチでは、ディレクトリ構造が一貫している限り、リポジトリのさまざまなブランチやフォーク内でイメージ リンクが機能し続けます。
Base64 エンコーディングを使用した GitHub README.md への画像の埋め込み
Base64エンコーディング用のPythonスクリプト
import base64with open("image.png", "rb") as image_file:encoded_string = base64.b64encode(image_file.read()).decode()with open("encoded_image.txt", "w") as text_file:text_file.write(f"<img src='data:image/png;base64,{encoded_string}'>")
Raw Content URL 経由で GitHub README.md に画像を追加する
GitHub の Raw URL 機能の使用
1. Upload your image to the repository (e.g., /images/image.png)2. Copy the raw URL of the image: https://raw.githubusercontent.com/username/repo/branch/images/image.png3. Embed the image in your README.md:
相対パスを使用した Markdown 経由での README.md への画像の埋め込み
マークダウンでの相対パスの使用
1. Upload your image to the repository (e.g., /images/image.png)2. Use the relative path in your README.md:3. Commit and push your changes to GitHub
GitHub アクションを使用した README.md への画像の埋め込み
サードパーティのホスティングを使用せずに GitHub README.md ファイルに画像を含めるもう 1 つの方法は、GitHub Actions を使用して画像埋め込みプロセスを自動化することです。 GitHub Actions を使用すると、リポジトリ内でワークフローを直接自動化できます。たとえば、画像を Base64 に自動的に変換し、README.md ファイルを更新するワークフローを作成できます。このアプローチにより、リポジトリ内の特定のフォルダーに追加された画像はすべて自動的にエンコードされ、README に埋め込まれます。
このようなワークフローを設定するには、YAML ファイルを .github/workflows リポジトリのディレクトリ。このファイルは、リポジトリのチェックアウト、画像をエンコードするスクリプトの実行、リポジトリへの変更のコミットなど、ワークフローのステップを定義します。このプロセスを自動化すると、手動介入なしで README.md を最新のイメージで更新し続けることができるため、効率が向上し、合理化されたワークフローが維持されます。
GitHub README.md での画像の埋め込みに関するよくある質問
- GitHub リポジトリに画像をアップロードするにはどうすればよいですか?
- 画像を GitHub のファイル ビューにドラッグ アンド ドロップするか、 git add コマンドの後に続く git commit そして git push。
- Base64エンコーディングとは何ですか?
- Base64 エンコードは、ASCII 文字を使用してバイナリ データをテキスト形式に変換するため、画像などのバイナリ ファイルをテキスト ドキュメントに埋め込むのに適しています。
- GitHub 上の画像の生の URL を取得するにはどうすればよいですか?
- リポジトリ内のイメージをクリックし、[ダウンロード] ボタンをクリックします。生の URL はブラウザのアドレス バーに表示されます。
- README.md で画像に相対パスを使用するのはなぜですか?
- 相対パスにより、リポジトリの異なるブランチやフォーク内でもイメージ リンクが機能し続けることが保証されます。
- GitHub Actions を使用して画像の埋め込みを自動化できますか?
- はい、GitHub Actions を使用してワークフローを作成し、画像を自動的にエンコードして README.md ファイルを更新できます。
- GitHub Actions を使用するには特別な権限が必要ですか?
- リポジトリへの書き込みアクセス権がある限り、GitHub Actions ワークフローを作成して実行できます。
- README.md で Base64 エンコードを使用する利点は何ですか?
- 画像を Base64 でエンコードされた文字列として埋め込むと、画像が README.md ファイル内に自己完結型で保持され、外部の画像ホスティングへの依存がなくなります。
- README.md にアニメーション GIF を埋め込むことはできますか?
- はい、直接リンク、Base64 エンコード、または相対パスのいずれかによって、説明したのと同じ方法を使用してアニメーション GIF を埋め込むことができます。
README.md への画像の埋め込みに関する最終的な考え方
GitHub README.md ファイルに画像を埋め込むと、プロジェクトの視覚的な魅力と明瞭さが向上します。 Base64 エンコード、生の URL、相対パスなどの方法を利用することで、外部のホスティング サービスに依存せずに画像を効果的に含めることができます。 GitHub Actions を使用してこのプロセスを自動化すると、イメージ管理がさらに簡素化されます。これらの戦略は、作品のプロフェッショナルで洗練されたプレゼンテーションを維持するのに役立ち、リポジトリをより魅力的で有益なものにします。