- ベストアンサー
HTMLのimgタグで画像が表示されない問題について
- HTMLのimgタグで画像を表示させる方法について詳しく教えてください。
- 画像のパスを正しく指定しても、画像が表示されず小さなサムネイルのようなものになってしまいます。
- HTML文書と同じレベルにおいたフォルダー内の画像は表示されるのに、他の場所の画像は表示されないのはなぜでしょうか？
- papashiroSooke
- お礼率90% (507/560)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
img タグの src= で表示用に指定するものは、URIでなければなりません。 "C:/xampp/htdocs/PHP-OOP～" というのは、Windowsのパス名であり、URIではありません。 ローカルのHTMLファイルをブラウザで表示したときにアドレスバーに表示されるもの、あれがURIになります。 URIは、「プロトコル名:パス」みたいな構造になっています。 (プロトコルが指定されないときは、HTMLの置いてあるカレントディレクトリを基準とします。) C:/xampp/htdocs/PHP-OOP/test.html をブラウザで表示したとき、 file:///C:/xampp/htdocs/PHP-OOP/test.html となっていますよね。 ですからそれに倣って、 <img src="file:///C:/xampp/htdocs/PHP-OOP/images/EVEdAnT.jpg" width="600" height="400"> のようにすれば表示できるでしょう。 しかし逆に、file: というのは一般のWeb上では無効です。 そのhtmlファイルを表示した、個々人のローカルコンピュータ内のファイルを指定してしまうのですから。 どのような用途で、ローカルファイルを指定したかったのでしょうか…?
その他の回答 (2)
- dell_OK
- ベストアンサー率13% (766/5720)
コピーしなくても表示はできます。 パスをきちんと記述すれば問題ないと思います。 例えば、質問者さまのローカルのHTML内に以下を追加してみてください。 －－－－ <img src="https://okwave.jp/_nuxt/img/logo_okwave_60max_height_nomargin.2d9ee73.svg"> －－－－ これはこのＯＫＷＡＶＥサイトの左上に表示されているロゴ画像ですが、この画像ファイルを質問者さまのローカルにコピーしなくても表示されると思います。
お礼
早速のご返答ありがとうございます。 パスを以下のようにして、画像を表示させることが出来ました。 src="http://localhost/PHP-OOP/images/EVEdAnT.jpg"
- AsarKingChang
- ベストアンサー率46% (3467/7474)
><img src= "images/EVEdAnT.jpg" width="600" height="400"> これは、 まず、HTMLが、aaaaa.htmlとすると /aaaaa.html /images/EVEdAnT.jpg 同じ階層+"images"というフォルダ内の、"EVEdAnT.jpg"だよ となります。 次の問題、xamppという文字が見えたので、 ローカルApacheのようですが、Windowsは 大文字小文字をチェックしない問題があり、 実際に使おうとすると404（見つからない！）となることが ありますので、全部小文字にする方が、トラブルが減ります。 一旦テストとして、 /aaaaa.html /images/EVEdAnT.jpg →これを /EVEdAnT.jpgにコピー してみるのはいかがでしょう。 最後に、今サンプルを"/"で書き始めていますが、 これは、Apacheの設定Document_rootで指定した パス以下を表してるので、設定を変更すれば どこにでも移動可能です。（本番サーバーでも同じ） などをチェックで、大抵はOKだと思います。
お礼
早速にご回答を頂き、有難うございます。 色々やってみます。
お礼
早速にご回答いただき、有難うございます。 今自分がやりたいことは、自分のコンピューター内にある色々なフォルダーの中にある画像ファイルを表示させたいというだけです。これはPHPによるオブジェクト指向プログラミングの練習として作ったものが働くかどうかを試しているのです。 src 属性として指定するのはURIという事ですが、画像を表すURLというのはどのようにすればよいのかわかりませんでした。ご提案頂いた以下のものを src としてやってみましたが、結果は同じでした。 src="file:///C:/xampp/htdocs/PHP-OOP/images/EVEdAnT.jpg" ところが、file:///C: から /htdocs/ までを http://localhost/ として見ましたら、上手く表示されました。 回答者様の「img タグの src= で表示用に指定するものは、URIでなければなりません。」というのがとてもいいヒントになりました。今までは画像を表示する時はいつもHTML文書と同じレベル以下のフォルダーに入れていたので、今回のような問題は発生しなかったのですが、これはとてもいい勉強になりました。