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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

15313閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

3クリップ

投稿2019/05/11 17:30

編集2022/07/06 11:20

環境: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

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tachikoma

2019/05/11 21:23

index.htmlの中身を見ないことには分かりませんね…。
退会済みユーザー

退会済みユーザー

2019/05/13 16:30

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

2019/05/15 06:14

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

回答4

0

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

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

投稿2019/05/15 02:16

編集2022/07/06 02:20
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/05/15 05:28

>html内の画像URLはGitHub Pageのものになっていますか? すいません、どういう事でしょうか? HTML、CSSで使用している画像は全てがAtomのimgフォルダ内にある、相対パスになります。
退会済みユーザー

退会済みユーザー

2019/05/15 05:38

すみません、スクショみましたが、index.htmlと画像群が同じフォルダになっており、Atomのツリービューと異なっています。これが原因でしょうか。 もしよければ、リポジトリのURLを教えていただければと思います。
退会済みユーザー

退会済みユーザー

2019/05/15 08:55

URLは教える事は可能ですが、 他の方も言っていますが、「リポジトリのURL」とは一体何を指すのでしょうか? お願いします。
退会済みユーザー

退会済みユーザー

2019/05/15 09:13

ファイル一覧のスクショをとったページのURLで結構です。
退会済みユーザー

退会済みユーザー

2019/05/15 14:17

ありがとう、やはり画像ファイルがimgフォルダに入っていないのが原因です。 Progateというのは学習サービスですかね。どのようにやればよいか問い合わせたらよいでしょう。
退会済みユーザー

退会済みユーザー

2019/05/15 16:26

たまたまProgateにGitHubで公開する方法が記載されていたので、試しにその通りやったらできなかった次第です。 >やはり画像ファイルがimgフォルダに入っていないのが原因です。 これはAtom側でどうこうするのではなく、Github側の問題ですよね? 具体的にどうするのでしょう? 何がどう間違っているのでしょうか?
退会済みユーザー

退会済みユーザー

2019/05/15 16:35

githubでimgファイルを作るにはどうするのでしょうか? また別にリポジトリを作るのでしょうか? それとも別な方法ですか?
退会済みユーザー

退会済みユーザー

2019/05/15 22:09

以下でアニメ付きで紹介してくれています。「github フォルダ作成」でググると出てくるので、以後詰まったときは積極的にググりましょう。 https://qiita.com/tommy_aka_jps/items/b2ae85cbeab77e12a925 また、githubで操作し続けるのは編集が面倒になるので、ローカルでgit使うことをおすすめします。以下サイトなどで手順が見れます。「git github 使い方」などでググるとさらによいでしょう。 https://techacademy.jp/magazine/6235 分からない言葉が出た場合も、積極的にググってみてください。そうするとまた分からない言葉がでてきてググり続けることになりますが、それがいま必要なことです。
退会済みユーザー

退会済みユーザー

2019/05/16 04:37

そのURLを何回も読みましたが、まるで理解不能です。私には。 ググる事が重要なのは重々承知の上ですが、 そもそも何をググるかわからないレベルです。 例えば、最初のURLのQiitaの記事ですが、これで要は何が言いたいのか、何を目的とした記事なのか全くもって理解できません。 そして私はエンジニアでも何でもなく、また、エンジニアを目指しているわけでもないので、 ググる事は重要ですが、ただただローカルにあるhtml/cssと画像をGithubで表示させたいだけなのですが...。 単に「ここをこうやってこうやればOK」という回答だけお聞きしたかったまでです。 これは果たして我儘なのでしょうか? 完全まる投げはここテラテイルのマナーとしてふさわしくないらしいですが、 この場合は逆にどうすれば良いでのでしょう? 最初のURLタイトルの「GitHub 上でサクッと空のディレクトリを作成する方法」 →ディレクトリ? 「ローカルでディレクトリ作って commit して push して~というのが面倒なときはお試しください。」 →面倒も何も、何を言っているのかサッパリ分かりません。 日本語で書かれてはいるので、馬鹿でも1ヶ月くらいただ「githubで表示させる」事を目的とすれば解決するのかもわかりませんが、恐らくくだらなくなって途中で投げ出すでしょう。 ただ「Github上で画像を表示させたい」ただただそれだけなのですが、 方法分かりますか?
退会済みユーザー

退会済みユーザー

2019/05/16 06:12

お気持ちは分かります。しかし悲しいですが、勉強するしかありません。 あなたにとってはヤキモキするでしょうが、重要なことなのでお尋ねします。 エンジニアでなくエンジニアになりたいわけでもないのに、なぜGitHubに「あのページ」を上げたいのですか?目的はなんでしょうか。 失礼ながら、解析する中でhtml内の文言がちらほら見えました。2桁万円の参加費を支払うエンジニア養成講座の宣伝ページでしょうか。 エンジニアでなくディレクトリの意味も分からない方が、何が目的で、あのページを上げるのですか?誰に見せるのですか?誰を連れて行くのですか? ハッキリ申し上げて、私は少し怪しみ始めています。 teratailが、マナー云々が、もしかしてそういうレベルではないのではないでしょうか。 バイトなら他にもいくらでもあるはずです。あなたは責任がないと思っていても、ページを上げた事実は残ります。ページには「yuki6001」と出ます。 依頼主がいるのなら、「自分には難しい仕事だった」と伝えましょう。脅してくるのであれば警察に相談すべきです。よく考えてください。人生は間違ってもいいが、したことは消えません。地獄なんてなくても、正しく生きたいと思ったときに既に手が汚れていては、一生脳内に「クギ」が刺されます。 それでも自分にとってそれが必要で、正義なのであれば、1ヶ月くらいただ「githubで表示させる」事を目的として悩んでください。その過程で投げ出すのであれば、それはあなたにとって必要のないことだったのです。 githubでディレクトリを作成する方法を示唆するよりもこの文章を書くことに私が時間をかけていることをご勘案いただきたい。今一度、考えてみてください。
退会済みユーザー

退会済みユーザー

2019/05/16 10:19

だいぶ誤解されているようですが...笑 まず一つずつ答えます。 >解析する中でhtml内の文言がちらほら見えました。2桁万円の参加費を支払うエンジニア養成講座の宣伝ページでしょうか。 →ただiSaraというサイトの模写をしただけです。関係者でも何でもありません。(逆に関係者でも問題ないとは思いますが) >エンジニアでなくディレクトリの意味も分からない方が、何が目的で、あのページを上げるのですか?誰に見せるのですか?誰を連れて行くのですか? →誰に見せようが見せまいが、失礼ながら当該質問にあたり関係ないのでは?ですがあえて答えます。 特別誰に見せようなど考えてませんね。趣味程度でHTML/CSS等を独学で学んでいる中、Githubという「サーバー契約しなくてもウェブ上で公開?できる」ものを知り、誰かに自分が作成したページを見せる事ができるのか!という興味本位でやろうと思い、Progateに契約していた為、そこに手順が書いてあったのでそれ通りやってもできないから、ただただ質問した次第。ただそれだけですよ? 連れて行くとは一体何のことを言っているのでしょう? あなたの経験からかもわかりませんが、かなりの偏見で言っていますよね?ソレ 「連れて行く」とは一体何を想像してそうなったのか、誰をどこに??何のため? また、逆に「連れて行く」としたら果たしてどのような問題があるのでしょう? 失礼ですが、独断と偏見で勝手な想像で言わないで頂きたく思います。 >ハッキリ申し上げて、私は少し怪しみ始めています。 →せっかく回答して頂いた方には言いにくいですが、それはこちらのセリフです。 何を言っているのですか??  >バイトなら他にもいくらでもあるはずです。あなたは責任がないと思っていても、ページを上げた事実は残ります。ページには「yuki6001」と出ます。 →だから勝手にあなたの想像で話を進めないで頂きたい。 バイト?笑 いやいやだから今は趣味程度ですが?フリーランスですが本業は別ですから。 もちろん今後上達すれば、仕事に繋げられれば面白いとも考えていますが。 >依頼主がいるのなら、「自分には難しい仕事だった」と伝えましょう。脅してくるのであれば警察に.... →いやいやですから、話を想像だけで勝手に進めないでください笑 でも私のためを思って書いてくれた事は伝わります。 >githubでディレクトリを作成する方法を示唆するよりもこの文章を書くことに私が時間をかけていることをご勘案いただきたい。 →質問者の立場でいうのもアレですが今更なので言います。 それなら何故普通に教えないのでしょうか? 普通に教えたら質問者のためにならないから?それはただの先駆者のお節介です。 ここテラテイルで質問している方は、全て各々事情や状況が違うと思いますが。 全てがエンジニアではないだろうし、私もそうですが。 それをあたなの価値観で、勝手に想像でお説教まがいな事言われても困るのですが。 別に良いでしょう?githubで誰に見せようが(または見せても)関係ないでしょう? ちなみに、一応言っておきますが、この模写したサイトは作成者がTwitterにて「ポートフォリオ等に許可なく載せて良い」と(条件付き)あります。 そもそも「示唆」って何ですか? 普通に教えれば良いのでは?わからないから質問しているのに、示唆って...。 求めているのは回答であって示唆ではありませんが。 上から目線すぎやしませんかねぇ。意地が悪すぎやしませんか? いやぁ、もう普通に質問しているのに、何故普通に答えてくれないのか。 非常に面倒くさいし胸糞悪いですねぇ。 不特定多数の登録者に向けて回答をもらいたく投稿しているに、 何故勝手な想像で勝手に怪しまれ、勝手に説教まがいな事言わてるのでしょう。 ただ答えたい人間が答える場所でしょう? 揚げ足や、示唆なんかされたくて質問してるのではないのですよ、私は。 今一度、考えてみてください。
退会済みユーザー

退会済みユーザー

2019/05/16 10:39

今一度、私の文面も見返して見ましたが、失礼な事を言っているのはわかります。 が、どうも気に食わないのです。(あなただけを指しているのではなく、稀にみる一部のユーザーも) なんかこの質問サイト テラテイルは、自分が偉い?すごい?と勘違いしているのか、 やたら上から目線な奴がいますよね? エンジニアってネット上ではそう言う方がお多いのでしょうか(偏見) (あなたはそこまでではないかと思いますが) なんか自分の部下や後輩が質問してきたと勘違い(錯覚)している人が多いイメージです。 別にキミに質問してないのだが?と言いたくなりますわ。 「自分がこうやってきたのだから、簡単には教えないヨ」的なお節介勘違い野郎がいますよね。(あなたは違うと思いますが) どう思いますか?
退会済みユーザー

退会済みユーザー

2019/05/16 14:59

二つ前の回答は素直にムカつきました。のでそこはもう触れません。 ひとつ前の回答(愚痴?)は分かる部分あります。たまに質問内容よく知らんのに絡んでくる人がいて「もういいんで…」と思うこともあります。 しかし、基本的に質問する側は「教えてもらう人」です。人間として上下はありませんので人格を否定するようなことは間違いだと言えますが、無料で人の時間を使って教えてもらうなら相応の態度があります。 また、相手はこちらの知識レベルを知りませんので、「このリンクで分かるだろう」と素直に送っていることがほとんどだと思います。しかし、前提知識にギャップがあると、逆に知識がある人も相手のわからなさが分からないものです。「全く分かりません」にも実際は幅があり、的確に応えることは難しい。(部下や後輩なら程度が分かるし責任があるので、もう少しいいのですがね。)
退会済みユーザー

退会済みユーザー

2019/05/16 15:31

まず2つ目のコメントに対しての意見はわかりました。 ですが、むしろ1つ目の私が質問した事項を答えるべきかと思いますが。 >二つ前の回答は素直にムカつきました。のでそこはもう触れません。 →いやいや、触れません?何言ってるのですか? 散々、あなたの勝手な想像、偏見、主観で物言っといて、触れません? それははさすがに筋が通らないのではないですか? 私はあなたの尋ねに正直に答えましたよ? あなたも私の質問に答えないのですか? お互い忙しいのは承知の上あえて言いますが、 「くだらない」や「面倒」の理由で逃げるのではなく、 あなたの意見を正直に言えば良いじゃない。 私の言っている事間違ってますか? 納得いかないのですわ。あなたの己の主観だけで物言ってる回答が。 わかるように説明するのが道理じゃないのですか?(これは私の主観だが) さすがに「触れませんで」は済まないでしょう
退会済みユーザー

退会済みユーザー

2019/05/17 11:45

もう私からは何も得られないことを悟ってね
退会済みユーザー

退会済みユーザー

2019/05/18 01:47

悟ってね?笑 逃げるなら、最初から己の勝手な想像だけで物言うなよ。 都合悪くなったら、逃げるのはお粗末すぎ。 最初のコメントの理由くらい答えるのが筋だろ。 「勘違いでした。すいません」と言えばええやろが。
guest

0

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

投稿2019/05/15 05:44

de9

総合スコア312

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/05/21 07: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していたと言う事なのでしょうか?
de9

2019/05/21 08:51

解決したようでなによりです。 知らなかったのですが、いつの間にかgithubに直接アップロードする機能が加わっていたのですね。 質問者様はこの直接アップロード機能をお使いでしたのでpush操作は不要でしたね……この回答は見当違いでした。 githubにはドラッグして直接アップロードする使い方の他に、gitというソフトを使ってパソコンのファイルとgithubのファイルを同期するという使い方があり、開発者の間ではこちらが主流になっています。 そして、こちらの使い方ではcommitやpushという操作を多用することになります。 「github 入門」で検索すると入門サイトも沢山出てくるので、もし興味がありましたら調べてみてもいいと思います。
退会済みユーザー

退会済みユーザー

2019/05/21 09:14

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

0

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

投稿2019/05/12 00:30

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/05/12 00:38

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

退会済みユーザー

2019/05/13 16:34

すいません返信遅れました。 >GitHub Pages上に「imgの画像がない」か「imgの画像の名前が間違っている」 これはAtomのimgフォルダ内をそのままドラックしたので、考えにくいです。(もちろん画像はアップロードされています) 10000文字以内でないとダメなので、HTML/CSSのコードは貼り付けられませんでした。 この場合、コードペンなどで共有するべきでしょうか? 他に必要な情報はありますか?
guest

0

ベストアンサー

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

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

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

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

投稿2019/05/21 09:14

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2019/05/21 09:22

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

退会済みユーザー

2019/05/21 10:05 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問