Apache-Cent OS初心者のための画像表示の方法
- Apache2.2.3をCent OS 5.6にインストールし、/var/www/htmlに作成したindex.html内に画像を指定しても表示されない問題が発生しています。
- 試しに画像を読み込ませると、タイトルのみ表示されますが、画像は表示されません。
- HTML内に<img src="/var/www/html/test.jpg">と記載しているので、画像を読み込むはずですが、404 Not Foundのエラーが表示されます。
- ベストアンサー
Apache-cent os 5.6 画像表示
すみません、Apache-Cent os初心者です。 教えてください。 Apache2.2.3をcent os 5.6にインストールし設定は httpd.confファイルなどdeffaultのままです。 /var/www/htmlに自分で作成した File name: Index.htmlに試しに画像を読み込ませたいのですが、 なぜかタイトルしか表示されませんでした。 画像の部分は表示されないので、読み込みさせたところ Not Found http://192.168.1.4/var/www/html/test.jpgと表示されます。(192.168.1.4はlocalの端末に振ってあるIPです） index htmlには <HTML><HEAD><TITLE> Test Home Page </TITLE> </HEAD> <img src="/var/www/html/test.jpg"> </body></HTML> と記載しました。 多分誤解していると思うのですが、色々googleなどで調べましたが 索引できてないもようです。 <img src="/var/www/html/test.jpg">と記載していれば、 htmlを読み込み＜＞index.html内に記載されてある img src = /var/www/html/配下に保存してある jpg画像を読み込むのではないのでしょうか。 デフォルトなので、html://192.168.1.4かhttp://localhostと入力すれば ファイル参照先から読み込むと思ってたのですが、違いました。 どなたか、簡単なhtmlを作成後、html内に画像を指定したものを表示させる方法をご存知でしたら 教えてください。 尚、最初 /var/www/html配下にindex.htmlが存在していたので test.htmlを同じディレクトリに作成したものを置き試しましたが、 Index of と表示されそこにtest.htmlが表示されていたので、index of 表示<>test.html が保存されているものが表示されているだけだと考えましたので、 Index htmlが読み込まれていると思い、test.htmlを削除し 試しにIndex html自身に上記書き込みを行いましたが Index of 事態が表示がなくなっただけで、http://192.168.1.4やlocalhostを入力しても タブの部分にタイトルだけ表示されているだけで、jpgの読み込みが失敗している四角いアイコンが 表示されているだけでした。（画像だけを表示とすると、404 Not Foundで The Request URL /var/www/html/test.jp was not found on this serverと表示されます 尚、ipは不思議と、http://192.168.1.4/var/www.html/test.jpgとなってました） 宜しくお願いいたします。
- apache007
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
上記で <HTML><HEAD><TITLE> Test Home Page </TITLE> </HEAD> <img src="/var/www/html/test.jpg"> </body></HTML> ・・・<body>がないです あと /var/www/html/がlocalhostとか192.168.1.4におきかわるので <img src="test.jpg">だけでいいんじゃないかと ＞/var/www/html/test.jp was not found test.jpでなくてtest.jpgじゃないかと
関連するQ&A
- ローカルファイルの画像を表示できない。
【環境】 WindowsXP Struts1.3.10 Tomcat6.0 HTMLの話かもしれませんが・・・・ JSPでC:\testimages\配下にある画像が表示できません。 プロジェクトのWebContent配下のはhttp://localhost/で指定していけば表示されるのはできるのですが、ローカルドライブ内のはできません。 試したコードは <img src"file:///c:/testimages/test.jpg"/> <img src"file:///c:\testimages\test.jpg"/> <img src"c:\testimages\test.jpg"/> などの組合せは一通り試したのですがだめでした。 何か設定が必要なのでしょうか？ クライアントだけで動かしたいです。 ご教授のほど宜しくお願いします。
- 締切済み
- HTML
- jqueryサブウィンドウにて画像切替サブ画像表示
質問お願いします。 元ページのサムネイル画像をクリックすると サブウィンドウが開き、この中でクリックした先ほどサムネイルの拡大画像を表示、他のサムネイル画像も表示し、サムネイルをクリックで拡大画像を切り替え、それぞれの画像に応じたサブ画像も表示させたいと思っています。 一番はクリックデータをサブウィンドウにもっていく方法がわかりません。 イメージで元ページ内での切替をやってみました <style> li img{width:100px;height:100px;} </style> ----jquery----- <script type="text/javascript"> $(function(){ $('li img').click( function(){ $('#main img').attr('src',$(this).attr('src')); $('#sub').text($(this).attr('title')); var postfix = '_on'; var src = $(this).attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('#sub2 img').attr('src',src_on); }); }); </script> ---html---- <ul> <li><img src="red.jpg" title="赤"></li> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> <div id="main"><img src="red.jpg" id="mainimg"></div> <p id="sub">赤</p> <p id="sub2"><img src="red_on.jpg"></p> 質問が分かりづらいかもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- Apacheの画像が表示できません。
Apache1.3.27のIndexで、 Test0904-01-pbg4.jpg というファイルをクリックしたりURL指定しても 表示できません・・ Test0904-02-navison.jpg というファイルは表示できるにもかかわらずです。。 HTMLを作成して、image srcタグで指定しても他の 画像は表示できますが、この名前の画像だけ表示 できないです。 IEで右クリックし対象をファイルに保存した後は、 画像が見れるのですが・・ こんな現象にあった方いらっしゃいますか？ パーミッションは全て同じ、同じパスにある画像 なのになんで、１つだけ見れないのか・・（T_T）
- ベストアンサー
- その他(OS)
- firefoxで表示される画像がIEで表示されない
同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。
- ベストアンサー
- HTML
- 画像の上に文字を表示
スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。 <IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0> ・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。 ＃マウスをのせて表示は除外。
- ベストアンサー
- CSS
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- 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
- 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
- jqueryでの画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 以下のように、削除したら無事に読み込ませられました。 ＞/var/www/html/がlocalhostとか192.168.1.4におきかわるので ＞<img src="test.jpg">だけでいいんじゃないかなと ありがとうございました！