質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.05%

Githubにて、画像が読み込まれない理由と解決策を知りたい

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 3,925
退会済みユーザー

退会済みユーザー

環境:MacBook 

Githubに、HTMLとCSSと画像ファイルをアップロードしたのですが、
Settingsの中のGitHub Pages の一番上にある URLをクリックすると、
HTML、CSSは反映されているのですが、画像が一つも反映されません。

一応Progateの指示通りやったのですが、何故画像だけが表示されないのかわかりません。

元々はAtomエディタで既に作成済みの、
HTMLファイルとCSSファイルです。(ブラウザでは反映されるので、imgのパスは間違っていません)

Atomのツリービューはコチラ↓
イメージ説明

行った手順

①Githubのアカウント作成後、リポジトリを追加
②READMEをクリック→Commit new file
③Create new file でhtmlのコードを貼り付け
④同様の手順でcssのコードを貼り付け
⑤Upload filesより、Atomエディタの中のimgフォルダの中身を全てアップロード

何が原因でしょうか?どうすれば画像が反映されるのでしょうか?

そもそもGithubの仕様をイマイチ理解してないのかもわかりませんが、
ただ画像をアップロードするだけではダメなのでしょうか?

以上、よろしくお願いします。

※5/14追記 10000文字以内でないとテラテイルでは記載できない為、html/cssのコードを貼り付けることはできませんでした。
また、HTMLファイル、CSSファイル(2つ)、画像ファイル(多数)がアップロードされた事がわかるスクショはコチラです。↓その他情報が必要な場合は言って頂けますと幸いです。
HTMLファイル1つと、CSSファイル2つ、画像はAtomのimgフォルダからドラックしただけです。

イメージ説明
イメージ説明
イメージ説明

なぜ反映されないのですか??

※5/16追記 未だに解決されないのですが、
単純に何をどうするのかわかる方いますか?
要は、ただgithubでAtomに入っているファイルを表示させたいだけです。(その"ただ"ができないのですが)
URLはコチラになります。
https://github.com/yuki6001/yuki6001.github.io

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tachikoma

    2019/05/12 06:23

    index.htmlの中身を見ないことには分かりませんね…。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/05/14 01:30

    返信お遅れました。見せたいのですが、
    10000文字以内ではないと、ここテラテイルでは更新できません。
    コードペンなどで共有した方が良いのでしょうか?

    キャンセル

  • CHERRY

    2019/05/15 15:14

    差し障りがないのであれば、GitHub リポジトリの URL を公開するのが早いかもしれません。

    キャンセル

  • 退会済みユーザー

    2019/06/04 10:52

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 4

+4

html内の画像URLはGitHub Pageのものになっていますか?

例えば
NG https://github.com/kobatakuJP/countdown-REIWA/blob/master/img/ogimg.png
とか指定してもgithubの管理側に行ってしまうのでダメです。
OK https://kobatakujp.github.io/countdown-REIWA/img/ogimg.png
と指定すれば、imgを直接参照できるので問題ないはずです。

htmlで指定しているURLをそのままブラウザのアドレスバーに入れて画像が参照できないようですと、そもそも画像が何らかの理由でGitHub Pageに反映されていないことになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/17 00:31

    まず2つ目のコメントに対しての意見はわかりました。
    ですが、むしろ1つ目の私が質問した事項を答えるべきかと思いますが。

    >二つ前の回答は素直にムカつきました。のでそこはもう触れません。
    →いやいや、触れません?何言ってるのですか?
    散々、あなたの勝手な想像、偏見、主観で物言っといて、触れません?
    それははさすがに筋が通らないのではないですか?
    私はあなたの尋ねに正直に答えましたよ?

    あなたも私の質問に答えないのですか?

    お互い忙しいのは承知の上あえて言いますが、
    「くだらない」や「面倒」の理由で逃げるのではなく、
    あなたの意見を正直に言えば良いじゃない。

    私の言っている事間違ってますか?

    納得いかないのですわ。あなたの己の主観だけで物言ってる回答が。
    わかるように説明するのが道理じゃないのですか?(これは私の主観だが)

    さすがに「触れませんで」は済まないでしょう

    キャンセル

  • 2019/05/17 20:45

    もう私からは何も得られないことを悟ってね

    キャンセル

  • 2019/05/18 10:47

    悟ってね?笑
    逃げるなら、最初から己の勝手な想像だけで物言うなよ。

    都合悪くなったら、逃げるのはお粗末すぎ。

    最初のコメントの理由くらい答えるのが筋だろ。

    「勘違いでした。すいません」と言えばええやろが。

    キャンセル

+1

「ブラウザでは反映されるので、imgのパスは間違っていません」ということは
消去法でGitHub Pages上に「imgの画像がない」か「imgの画像の名前が間違っている」の
どちらかの可能性しかないです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/12 09:38

    「imgのパスは間違っていません」とあるので
    baseURLなども適切に設定されているという前提の回答です。

    キャンセル

  • 2019/05/14 01:34

    すいません返信遅れました。
    >GitHub Pages上に「imgの画像がない」か「imgの画像の名前が間違っている」
    これはAtomのimgフォルダ内をそのままドラックしたので、考えにくいです。(もちろん画像はアップロードされています)

    10000文字以内でないとダメなので、HTML/CSSのコードは貼り付けられませんでした。
    この場合、コードペンなどで共有するべきでしょうか?


    他に必要な情報はありますか?

    キャンセル

+1

imgディレクトリーがローカルにはあるのにGithubリポジトリーの方にはないですね。
imgに画像ファイルを移したcommitをpushし忘れているのではないかと思うのですが、どうでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/21 16:04 編集

    自己解決しました。
    単純に今回のケースは、Atomのimgフォルダの中の画像群をドラッグしたから反映されなかっただけで、
    『Atomの「imgフォルダごと」Upload filesにドラック』したら普通に反映されました。
    そう言う事ですよね?
    他の回答者が私にはわからない言葉で難しい回答をしていた為、余計混乱しました。
    これポイントとしては質問にもあります、
    ⑤Upload filesより、Atomエディタの中のimgフォルダの中身を全てアップロード
    この「imgフォルダの中身を」が間違っていただけで、
    回答としては、「"imgフォルダの中身を"ではなく、"imgフォルダごと"ドラッグすればOK」と言うただそれだけの事だったのでしょうか?

    ですが、githubにはcommitやpushと言う言葉(操作)があるらしいのですが、
    特別そんな事していないのに、きちんと反映されたのは何故でしょうか?

    commitボタンもpushボタンも押してません...(そんなボタンはないでしょうが笑)

    これはcommitをpushし忘れていてもできたと言う事ですか?
    それとも、commitをpushしてるつもりなくても事実上pushしていたと言う事なのでしょうか?

    キャンセル

  • 2019/05/21 17:51

    解決したようでなによりです。
    知らなかったのですが、いつの間にかgithubに直接アップロードする機能が加わっていたのですね。
    質問者様はこの直接アップロード機能をお使いでしたのでpush操作は不要でしたね……この回答は見当違いでした。

    githubにはドラッグして直接アップロードする使い方の他に、gitというソフトを使ってパソコンのファイルとgithubのファイルを同期するという使い方があり、開発者の間ではこちらが主流になっています。
    そして、こちらの使い方ではcommitやpushという操作を多用することになります。
    「github 入門」で検索すると入門サイトも沢山出てくるので、もし興味がありましたら調べてみてもいいと思います。

    キャンセル

  • 2019/05/21 18:14

    なるほど、そう言う事でしたか。
    ありがとうございます。

    キャンセル

check解決した方法

-9

単純に質問の⑤Upload filesより、Atomエディタの中のimgフォルダの中身を全てアップロード
この「imgフォルダの中身を」が間違っていただけで、
「"imgフォルダの中身を"ではなく、"imgフォルダごと"ドラッグすればOK」
と言う事が解答とわかった。

ただ「imgファイルごと移動する」ただただ、それだけ。

その一言を誰でも良いから言って欲しかった...。
勝手な妄想で御託並べていた回答者もいたが、全く必要なし。

もったいぶって偉そうに、勝手な妄想で「質問者のため」的な文章は断じて求めていない。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/21 18:22

    最初のほうで jjj_aaa さんが「すみません、スクショみましたが、index.htmlと画像群が同じフォルダになっており、Atomのツリービューと異なっています。これが原因でしょうか。」と言っていてわたしは解決だと思っていたのですが……
    「ドラック」という用語を使っていたようでそれも混乱を招いたのでは?

    キャンセル

  • 2019/05/21 19:00 編集

    私はその部分は解決と全く思っていません。
    jjj_aaa は「示唆」と言っている事からも、直接的な解答にまるでなっていないと私は思いました。私は。
    で、その後URLを見せ、返信が「やはり画像ファイルがimgフォルダに入っていないのが原因」とありました。
    これも、「だからそのやり方を聞いているのだが.... 」と思いつつ、こちらも返信すると、URLを貼った返信が来て、
    その内容は解決には全くいたらず。
    (pushやコミットどうのこうの関係ないのですから)
    そこで、自分でMacのFinderの「imgフォルダごと」ドラッグさせたらまさかの反映された為、そこで解決した次第です。

    また、「ドラッグ」を「ドラック」に間違えただけで、果たしてどのような混乱を招きますか?
    単純に誤字だと判断できないのでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る