たった今、HTMLとCSSを使用して作成したホームページを、お名前ドットコムからサーバーにアップロードいたしました。
SafariやGoogleChromeから確認したところ、画像だけが「？」になってしまい表示されません。
お名前ドットコムのファイルマネージャーに、index.htmlなどのhtmlファイルとcssファイル、また、画像ファイルもアップロードしたのですが、上手くいきません。画像は、はじめドラッグ&ドロップでアップロードし、上手くいかなかったので、お名前ドットコムからファイルを開いて追加したのと２つあります。どちらを消して良いかわからずそのままになっています。
画像を表示させるにはどうしたらよいでしょうか？
初学者のため、わかりにくい説明になってしまっていたら申し訳ありません。
アドバイスいただけると幸いです。
提供されている情報だけでは分かりません。考えられるのは img 要素の src 属性に設定している画像へのパスが間違っているとかですが、想像に過ぎません。インターネットで公開されているサイトならその url を書けませんか？
あと、スクリーンショットが撮れませんか？ 見難いです。
【追記】
下のコメントのやり取りの後で直したよね？ 今は見えてますよ。
実は画像ファイルは img フォルダにあって、
<img src="img/arcaimperf-headerlogo.png" alt="ヘッダーロゴ">
<img src="img/arcaimperf-background.jpeg" alt="背景画像">
と直したんだよね？
多数の閲覧者・回答者の手を煩わせたのだから、黙って去らないで、礼儀としてあなたの質問を見て考えてくれた人に何か一言あってもいいと思いませんか？
@ryobaby
Questionerご回答ありがとうございます。
写真が見づらく大変申し訳ございませんでした。
サイトのurlは、「arcaimperf.com」です。
サイトのurlは、「arcaimperf.com」です
https://arcaimperf.com/index.html にアクセスすると返ってくる html ソースの中には img 要素は下の 2 つありますが、それって何なのですか？
<img src="https://drive.google.com/file/d/1mhptIsqEOluOXPgSvOjDVot-uZpz5i41/view?usp=share_link" alt="ヘッダーロゴ">
<img src="https://drive.google.com/file/d/1I7A4ZpRGigI1Tsya5wADYitSvD2n1DcS/view?usp=share_link" alt="背景画像">
その src 属性の url に要求が出ると https://acount.google.com/... にリダイレクトされ、結局最終的に 403 Forbidden 応答が返ってくるんですが、一体どうなっているのですか？
はっきり言わせてもらえると、何も分かってなくて、やってることがメチャクチャという感じです。
@ryobaby
Questionerご回答ありがとうございます。
私の方で調べて、画像がローカルな参照になっており、urlを取得しなければいけないということがわかり、Googleドライブに画像をアップロードし、そこからurlを取得した次第です。
わかりづらく大変申し訳ありません。
サーバー上で画像を参照できるようにするには、どのようにして画像のurlを取得したらよいのでしょうか？
src 属性に設定した url をブラウザのアドレスバーにコピーして要求をかけたとき、ブラウザに画像が表示されないとダメです。
<img src="https://drive.google.com/file/d/1mhptIsqEOluOXPgSvOjDVot-uZpz5i41/view?usp=share_link" alt="ヘッダーロゴ">
<img src="https://drive.google.com/file/d/1I7A4ZpRGigI1Tsya5wADYitSvD2n1DcS/view?usp=share_link" alt="背景画像">
の src 属性の url は何だか分かりませんが、そうなってないからダメなんです。私が言ってること分かります？
@ryobaby
Questionerご回答ありがとうございます。
わかります。
私が使いたい画像は、私の友人が撮った写真で、元のファイルにはhttpsのようなurlが付いていなくて、SuferOnWww様がおっしゃるような、アドレスバーにコピーして要求をかけた際に正しくブラウザに表示されるようなurlはどのように取得したらよいのでしょうか？
https://arcaimperf.com/index.html の index.html が最初の質問の一枚目の画像にある index.html のことなら、それがあるフォルダに画像をアップロードして、その画像ファイルの名前が例えば headerlogo.jpg なら、
<img src="headerlogo.jpg" alt="ヘッダーロゴ">
としてみては？
そう言って分からないようですと、話は通じないと思います。勉強して出直すことをお勧めします。
@ryobaby
Questionerご回答ありがとうございます。
はじめはおっしゃるように、src="画像ファイルの名前"としてコーディングをし、index.htmlと同じファイルにアップロードしたのですが、表示されなかったんです。
やり方の問題でしょう。https://arcaimperf.com/index.html は私のブラウザで表示できてます。その index.html と同じフォルダに例えば headerlogo.jpg という jpg ファイルがあればそれが表示できないはずはありません。ブラウザのアドレスバーに https://arcaimperf.com/headerlogo.jpg として表示されなければ何か私の想像を超えたところで間違ってるのでしょう。
やっぱり基本的なところが分かってなくて、話が通じてないと思います。勉強して出直すことをお勧めします。
@ryobaby
Questionerご回答ありがとうございます。
勉強し直します。
お忙しい中、ご丁寧にありがとうございました。
ローカルとサーバ上では画像ファイルへのパスが異なるのでは？
@ryobaby
Questionerご回答ありがとうございます。
先ほどGoogleドライブに画像をアップロードし、URLを取得して試してみたのですが、変わらず表示されないままでした。
解決したのであれば、本問をクローズしましょう。
お名前ドットコムのサーバーは使ったことがないのですが、考えられる可能性は２つです。
まずは、ブラウザのアドレスバーに画像のURLを入力して直接参照してみましょう。画像が表示されれば少なくとも参照可能な状態（公開されている状態）と判断できます。
表示されなければ、アップロードする場所が誤っているか、入力したURLが誤っているかのどちからだと思います。
画像が表示されたのであれば、参照するためのパスが間違っている可能性があります。
htmlやcssの該当箇所と、ディレクトリ構造（ファイルの位置関係）を記載していただければ原因がわかるかもしれません。
@ryobaby
Questionerご回答ありがとうございます。
何度も確認したので、パスには問題はないかと思います。
また、公開ディレクトリについて詳しく教えていただけないでしょうか？
Googleドライブに画像ファイルを作り、そこからURLを取得して画像を参照しましたが、こちらの方法では表示されませんでした。
公開ディレクトリはインターネットに公開されるディレクトリです。そこに置いたHTMLや画像などがhttps://～のような形で参照できるようになります。
ホームページデータは「public_html」内の各ドメイン名のフォルダ内に
アップロードします。1
このように説明されている場所です。この外に置いてしまうとパスが正しくても参照できません。
Googleドライブに画像ファイルを作り、～
Googleドライブの共有リンクURLは直接画像を参照するものではないので、src="～"で設定しても参照できないと思います。
通常はHTMLやcssと一緒にサーバーに置くのですが、画像はGoogleドライブに置きたいのでしょうか？
index.htmlと画像ファイルが同じ階層ならIMGタグにパスは不要でファイル名指定で表示は出来ると思うけど
GoogleDriveの共有を有効に下フォルダに置いてもIMGで画像を表示させるのは推奨されない
多分リダイレクトに失敗するし出来たとしてもそのうち出来なくなる
