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

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

ただいまの
回答率

88.35%

htmlで画像を表示できない

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 5,054

itsuki

score 15

VMwreのCentOS6.7でhtmlを勉強しているものです
< img src=~>文を使ってFireFox上にlocalhost/~.htmlのアドレスを入力すると画像が表示できませんでした(ファイルがちぎれたような描写でした)

画像は、無料配布の写真をjpgでDesktopに保存しています。よって、<img src="/home/ユーザ名/Desktop/画像.jpg">と指定しています

また、以下のことは試しましたので参考にしていただけたら幸いです
・写真をFireFoxにドラッグ&ドロップしても問題なく表示されました

ご教示お願いします

~.htmlのコード

<html>
   <head>
      <title> home </title>
   </head>

   <body>
      <img src=”file:///home/ユーザ名/Desktop/~.jpg”>
   </body>
</html>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • archiver

    2016/05/03 00:48

    実行環境について教えて下さい。
    1.VMware上のCentOSでページの作成とブラウジングをしているのでしょうか?
    2.CentOS上で作成、Windows環境からブラウジング
    3.Windows上で作成、CentOS上からブラウジング
    4.(よもやと思いますが)Windows上で作成、Windows上でブラウジング
    5.その他のやり方(これだったら、具体的に明示してください)

    キャンセル

  • itsuki

    2016/05/03 00:57

    目的を書いてませんでしたね
    失礼いたしました
    目的は単純にhtmlで読み込んだ画像をブラウザ上に表示させたいだけです
    またCentOS内でhtmlを作成して同じCentOSのFireFox上で画像を表示させたいので実行環境は1だと思います

    キャンセル

  • kei344

    2016/05/03 22:01

    「ファイルがちぎれたような描写」を具体的に画像かなにかで提示してください。今の表現ではどのような状況かわかりません。

    キャンセル

回答 3

checkベストアンサー

+1

ApacheなどのWebサーバを立ち上げていて、上のhtmlファイルはWebサーバのルート・ディレクトリ(/var/www/html/など)にあり、ブラウザからはhttp://localhost/xxx.htmlという形でアクセスしているということはないでしょうか?
もしそうなら、画像ファイルはWebサーバがアクセスできない場所にあるため、表示することはできません。画像ファイルをhtmlファイルと同じフォルダーにおいて試してみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/08 06:56

    権限は問題なさそうなので、怪しいのはSELinuxですね。
    http://totech.hateblo.jp/entry/2015/04/05/223714
    OSはCentOS6.7 とのことなので、このあたりを見て、SELinuxを止めて試してみてください。
    https://www.ipentec.com/document/document.aspx?page=linux-selinux-configuration

    キャンセル

  • 2016/05/08 19:29

    SELinuxを止めたところ正しく表示できていました!
    長く相談に付き合ってくださりありがとうございます!!

    キャンセル

  • 2016/05/08 21:14

    うまくいってよかったです。SELinuxが原因で動かないことはよくあるのですが、そこに気づくまでが大変です。仮想マシンで勉強されている段階なら、SELinuxとFirewallは止めておいたほうがいいかと思います。

    キャンセル

+1

<img src="/home/ユーザ名/Desktop/画像.jpg">

ドキュメントルートとパスの指定がずれているのでは?
そうではないのであれば、読み込みの権限ではないかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/03 21:18

    回答ありがとうございます.
    htmlファイル自体と画像ファイルは/var/www/html内に保存しています.
    また,権限の可能性も考慮して chmod 777 画像.jpgコマンドを打ちました.
    そしてブラウザからはhttp://localhost/~.htmlでアクセスしています.
    パスは同じフォルダ内にあるため<img src="画像.jpg">
    としました.
    結果は変わらずに,ファイルが裂けたような表示が出るだけです.

    キャンセル

  • 2016/05/04 09:52

    このコメントだけだと、よくわからないんですが、切り分けのために以下を行なったという認識で良いですか?
    1,画像ファイルの保存先を、Document root である【/var/www/html】の直下に変更
    2,htmlファイルの記述も<img src=”file:///home/ユーザ名/Desktop/~.jpg”>から<img src="画像.jpg">へ変更
    3,画像ファイルのアクセス権限を777へ変更

    切り分けの結果としては
    1,http://localhost/~.htmlは正常に読み込めている(画像は読み込めないが、titleやソースを見る限り正常)
    2,http://localhost/画像.jpgは正常に読み込めない(エラー内容不明)
    3,file:///home/ユーザ名/Desktop/画像.jpgは正常に読み込み(画像が表示される)
    →画像ファイルは壊れていない。

    http://localhost/画像.jpgの時のエラーメッセージが知りたいです。確認して下さい。
    あと、切り分けた内容と結果ぐらいまとめて書いて下さい。
    また、実環境と変えて表現している箇所も明確に。

    キャンセル

  • 2016/05/08 00:30

    回答りがとうございます。
    切り分けのために行ったことについては1~3の点の認識で間違いないです。

    結果は、
    ・titleは正常に読み込めている
    ・forefoxのアドレスにhttp://localhost/~htmlを指定したところ、ファイルが裂けたような表示がでました(画像で説明したいのですが、貼り方が分かりませんでしたので…)

    ・アドレスにhttp://localhost/画像.jpgを指定したところ、
    403 Forbidden

    You don't have permission to access /画像.jpg on this server.
    Apache/2.2.15 (CentOS) Server at localhost Port 80
    と出力されました。permissionを得ていないらしいので、ls -lコマンドで調べたところ、
    -rwxrwxrwx. 1 ユーザ名 ユーザ名 144487 5月 2 06:14 2016 画像.jpg
    となりました。

    また、何度も質問をして申し訳ないのですが、「実環境と変えて表現している箇所も明確に」とはどういうことでしょうか?
    よろしくお願いいたします。

    キャンセル

+1

画像ファイルがhtmlと同じ階層にあるのなら

<img src=”file:///home/ユーザ名/Desktop/image.jpg”>

ではなく

<img src=”image.jpg”>

で良いのでは。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/03 21:43

    回答ありがとうございます.
    先ほどvar/www/htmlに画像ファイルとhtmlファイルを入れ,
    <img src="image.jpg">で実行したところ,
    ブラウザにファイルが断片化された表示が出ました.
    権限も考慮し,chmod 777 image.jpgコマンドを実行しました.

    キャンセル

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

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る