#7.README.mdファイルの画像をGit上で表示する方法

はじめに

こんにちは～nayaaaaです。

README.mdファイルに画像ファイルを添付してGitHubにプッシュしたのですが、
画像が表示されないということがあったので、原因と対処について記事にしてみました。

やったこと

➀VSCodeを使用してREADME.mdファイルを開く
➁画像ファイルを添付（画像ファイルをドラッグ＆ドロップ）
➂GitコマンドでGithubへプッシュ

という感じで➀～➂まで行ってみたのですが、
以下のように、画像が表示されないということがありました。

原因

なんでかなぁと思い確認してみたのですが
確認した結果としては、
参照先に画像がそもそも配置されていなかったため、コメントのみの表示となっていました....

対処

原因に記載したとおり、指定フォルダの配下に画像を保存してみます。
また、インターネットで調べているうちに知ったのですが、
Githubのコメント欄などに画像をドラッグ&ドロップすると
Gitで管理しているサーバに画像をアップロードし、そこを参照するようにリンクを生成します。
生成されたリンクを記述することで画像を表示することも可能、ということなのでこちらも試してみます。

まず、Githubのコメント欄に画像をドラッグ&ドロップします。

するとリンクが生成されるのでこちらをREADME.mdに追記します。

■README.mdの編集画像

あとは、指定されたディレクトリに画像を配置してGithubにpushします。

これで画像の投稿について設定完了したので確認してみます。

コードは上の画像のようになるかと思います。

確認のために同じ画像を使用しているので見栄えはって感じですが表示できましたね！　

まとめ

今回はGithubに画像が投稿される仕組みについて学ぶことができました。
こういった画像が表示される仕組みや画像がどのように投稿されるかといった仕組みについては、
「こういう操作したら画像が投稿されるんだぁ～」という感覚的なものでしかなかったので、
これを機会に学ぶことができて良かったです。