HTMLのimgタグで画像が表示されない問題について
- HTMLのimgタグで画像を表示させる方法について詳しく教えてください。
- 画像のパスを正しく指定しても、画像が表示されず小さなサムネイルのようなものになってしまいます。
- HTML文書と同じレベルにおいたフォルダー内の画像は表示されるのに、他の場所の画像は表示されないのはなぜでしょうか？
- ベストアンサー
HTML の<img> タグについて
御世話になります。 Windows10でHTMLの<img> タグを使って画像を表示させたいのですが、タグの中の src 属性に、ファイルエ・クスプローラーでShiftキーを押したままマウスの右クリックで得られるファイルのパスを張り付けると、画像が表示されず、小さなサムネイルのようなもの（決して実際の画像のサムネイルではありません）だけになります。 HTML文書と同じレベルにおいてあるフォルダー内の画像はちゃんと表示されるのですが。 これはコンピューターのあちこちにある任意の画像を表示させたければ、HTML文書と同じレベル以下のフォルダーにコピーしておかなければならないという事なのでしょうか？それとも各画像をコピーしてこなくてもそのままの位置に置いたまま表示させる方法があるのでしょうか？ どなたか詳しい方がいらっしゃいましたら、詳しく教えて頂きたいと思います。 自分のソースコードを張り付けておきます。 まず表示されるもの。 <!DOCTYPE HTML> <HTML> <head> <title> example02</title> </head> <body> <img src="C:/xampp/htdocs/PHP-OOP/images/EVEdAnT.jpg" width="600" height="400"> </body> </html> 次に、表示されないもの。 <!DOCTYPE HTML> <HTML> <head> <title> example02</title> </head> <body> <img src= "images/EVEdAnT.jpg" width="600" height="400"> </body> </html> 以上、よろしくお願いいたします。
- papashiroSooke
- お礼率90% (477/530)
- 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% (739/5636)
コピーしなくても表示はできます。 パスをきちんと記述すれば問題ないと思います。 例えば、質問者さまのローカルの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/7472)
><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だと思います。
お礼
早速にご回答を頂き、有難うございます。 色々やってみます。
関連するQ&A
- html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- HTML5での画像表示について
HTML５を勉強しはじめたばかりの者です。 http://nigohiroki.hatenablog.com/entry/2013/01/04/025502 ここのサイトみながらラインと四角を表示することはできたのですが、 画像を表示することができません。 <!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title>canvasApp</title> </head> <body onload="init()"> <canvas id="first" width="200" height="200"></canvas> <script type="text/javascript"> var canvas = document.getElementById('first'); var ctx = canvas.getContext('2d'); function init(){ var img = new Image(); img.src = "01.jpg"; ctx.drawImage(img, 100, 100, 200, 200); } </script> </body> </html> どこがおかしいのかさっぱりわかりません。 試しに</body>の前に<img src="01.jpg">と入れるとなぜか表示できるのですが、 外すと表示できなくなります。 よろしくお願いします。
- ベストアンサー
- HTML
- IMGタグごとにCSSを設定する方法
自分でGoogleやYahoo検索をしても見つけられなかったので、どなたかお教えください。 現在、HTML内に以下のようにIMGタグで画像添付しています。 -------- <img src="***" width="160" height="140" /><br /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> -------- 最初に大きな画像を表示し、その下に並列するかたちで小さいサムネイルを並べています。 普段はCSSでレイアウトをして、画像それぞれにstyle属性やclass、ID属性などを付けています。それが、今回は上述のHTMLを外部サイトのPHPから出力しているもので、一切触れない（編集できない）状態にあります。 このような状態の場合でも、画像それぞれにCSSを設定することは可能なのでしょうか？最低限の希望は、大きい画像（160px*140px）をひとかたまり、サムネイル画像（32px*30px）をひとかたまりとして、それぞれのかたまりにCSSを設定できれば良いと思っています。 可能であればHTML＋JavaScript＋CSSで実現できる方法を希望します。 どなたかお教えください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 一瞬画像が
現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか？ どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptで数値をimgに設定する
JavaScriptで 下記のソースにてランダムで出した数値を htmlの width="" height=""に 設定するには どのようにすればよいのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <script> var width = Math.floor(Math.random() * 400) + 1; var height = Math.floor(Math.random() * 400) + 1; </script> <img src="hoge.jpg" alt="" width="" height=""> </body> </html>
- ベストアンサー
- JavaScript
- ALT属性に見出しタグをつけると画像がズレます。
見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- HTMLのことで・・・・・・・・。
さきほども質問したのですが、少々説明不足だったので、もう一度質問したいと、思います。。。；；； この下は、今の私のソースです； ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <Html> <Head> <Title>～</Title> </Head> <Body> </div> このバナー <!-- content end --> <!-- topleft --> <div id="left"> <a href="#"><img src="ban_seitokai.jpg" width="200" height="60" alt="生徒会の一存"></a> <br> <a href="#"><img src="bn_key.gif" width="200" height="60" alt="key"></a> <a href="#"><img src="" width="" height="" alt=""></a> <a href="#"><img src="" width="" height="" alt=""></a> </div> <div id="right"> <div align="center"><h1>タイトル</h1></div> <p>文章</p> </div> </div> <!-- topleft end --> </div> <!-- maincontent end --> </Body> </Html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー この画像の上の図が↑のソースです。 下の図は、『こうしたい』という図です。 画像の隣に文章を表示させたいのですが、どうすればなりますか？ できれば、わかりやすく、例や見本を書いてくれますと助かります；
- 締切済み
- その他([技術者向] コンピューター)
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
お礼
早速にご回答いただき、有難うございます。 今自分がやりたいことは、自分のコンピューター内にある色々なフォルダーの中にある画像ファイルを表示させたいというだけです。これはPHPによるオブジェクト指向プログラミングの練習として作ったものが働くかどうかを試しているのです。 src 属性として指定するのはURIという事ですが、画像を表すURLというのはどのようにすればよいのかわかりませんでした。ご提案頂いた以下のものを src としてやってみましたが、結果は同じでした。 src="file:///C:/xampp/htdocs/PHP-OOP/images/EVEdAnT.jpg" ところが、file:///C: から /htdocs/ までを http://localhost/ として見ましたら、上手く表示されました。 回答者様の「img タグの src= で表示用に指定するものは、URIでなければなりません。」というのがとてもいいヒントになりました。今までは画像を表示する時はいつもHTML文書と同じレベル以下のフォルダーに入れていたので、今回のような問題は発生しなかったのですが、これはとてもいい勉強になりました。