【GitHub】リポジトリ内の画像がREADME.mdに表示されない時の対処法

原因

リポジトリ内の画像をREADME.mdに表示させようとした時、以下のようにアイコンのみが表示され、画像が正しく表示されない場合の対処法について紹介します。

まず最初に疑うべきは以下の記事の事項です。

それでも解決できない場合は、数式表現「$$」が編集上の1行に含まれていることが原因の可能性があります。

以下は、リポジトリのfigures/hoge.pngが正しくpushされている状態で画像が表示されない例です。

画像の前に数式

$formula$![from_repository](figures/hoge.png)

画像の後に数式

![from_repository](figures/hoge.png)$formula$

改行を入れる

![from_repository](figures/hoge.png)
$formula$

"br"の空行を入れる

![from_repository](figures/hoge.png)<br>
$formula$

"br"の空行を2つ入れる

![from_repository](figures/hoge.png)<br><br>
$formula$

対処法

空白行を挿入する

数式と画像の間に<br>を使わずに空白行を挿入すると、正しく動作します。ただし、画像と数式を同一行に表示したい場合は後述の方法を使用してください。

空白行を挿入する

![from_repository](figures/hoge.png)

$formula$

空白行を挿入すると画像が正しく表示されます。

GitHub Issueからアップロードした画像を使う

以下の記事に従って、GitHubのIssueに画像をアップロードし、その画像を使用する場合には、この問題は発生しません。

この方法を使用すると、画像と数式を同一行に表示することもできます。

Issueからの画像を使用する

![from_issues](https://github.com/yusuke1999/figure_test/assets/107452903/5cbb17e1-96cf-4dce-86e7-ab5d58f8cef6)$formula$

Issueからの画像は、画像と数式を同一行に表示できます。