none
localhostで画像が表示されない RRS feed

  • 質問

  • 標題のとおり、localhostで画像の表示ができなく、解決方法をご教示ください。

    OS:Windows10

    開発環境:VisualStudio2019

    言語:VisualBasic

    アプリケーションの構成
    WebTest
    ├Images
    │└Logo.png
    ├Page
    │└TopPage.aspx
    └WebTest.Master

    WebTest.MasterにImageコントール(id=Image1)を追加して、ImageUrlプロパティにImages\Logo.pngを設定しました。
    デザインビューのImage1のプロパティウインドウのImageUrlプロパティは、「~/Images/Logo.png」と表示しております。
    ソースは、以下です。
    <body>
     <form id="MasterForm" runat="server">
      <header>
       <asp:Image ID="Image1" runat="server" Height="231px" ImageUrl="~/Images/Logo.png" Width="186px" />
       <br />
       <asp:SiteMapPath ID="SiteMapPath1" runat="server">
       </asp:SiteMapPath>
      </header>
     </form>
    </body>
    TopPage.aspxは、このMasterファイルを継承して作成しました。
    また、ソリューションエクスプローラからTopPage.aspxを選択して、コンテキストメニューの「スタートページに設定」でスタートページに設定しました。
    DebugモードのIIS Expressで実行すると、TopPage.aspxおよびそのページでLogo.pngが表示されるのですが、
    WebTestアプリケーションを発行して、Mictrosft Edgeでhttp://localhost/WebTest/Page/TopPage.aspxのURLを入力してアクセスすると、
    TopPage.aspxは表示されるのですが、Logo.pngの描画の場所の左上に「×」マークが出て実物が表示されません。
    以下、調べたのですが、表示されない原因が究明できませんでした。
    ・Mictrosft Edgeで「ソースの表示」を選択し、srcが正しい場所を指定できているか確認しましたが、相対パスで正しく指定できていると考えています。
    <header>
     <img id="Image1" src="../Images/Logo.png" style="height:231px;width:186px;" />
     <br />
     <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style=";left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">ナビゲーション リンクのスキップ</a><span>トップ</span><a id="SiteMapPath1_SkipLink"></a></span>
     <br />
    </header>
    ・発行した場所にpngファイルが発行できているか確認しましたが、「C:\inetpub\wwwroot\WebKSM\Images」に「Logo.png」があることを確認しました。
    ・アクセス権限を調べましたが、「IUSR」「IIS_ISRS」「DefaultAppPool」に「読み取り」を許可していることを確認しました。
     「IIS_ISRS」は、加えて「読み取り実行」および「フォルダーの内容の一覧」も許可になっています。
    ・別のブラウザなら表示されるかと、InternetExplorerでアクセスしてみましたが、同じく表示されませんでした。
    ・別ファイル「test.jpeg」をImagesに登録して、Image1に「test.jpeg」を設定しましたが、同じくDebugでは表示されましたが、localhostからのアクセスでは表示されませんでした。
    参考書一つ読み、学び始めたばかりですので、言い回し等、説明に不備があれば申し訳ございません。
    いろいろネットで類似する解決策を検索したのですが、うまく見当たらず、質問させていただいた次第です。
    お手数ですが、何処に問題があるか、アドバイスを頂けますでしょうか。
    2019年12月7日 13:31

回答

  • コントロールパネル→Windowsの機能の有効化または無効化から、

    インターネットインフォメーションサービス→World Wide Web サービス→HTTP 共通機能→静的なコンテンツ

    のチェックはついているでしょうか?

    // 以前これではまったことがあったので…。

    • 回答としてマーク ssssssssssf 2019年12月10日 12:06
    2019年12月9日 21:35
  • > Fiddlerもといネットワークの知識が全くなく、キャプチャーしたもののどのデータをチェックすれば良いかわかりません。

    正しい応答・要求を見ていますか? Page/TopPage.aspx にアクセスしたのであれば、下の画像の #3 の行が TopPage.aspx 本体のもので、#5 が Images/Logo.png のものです。なので #5 を見なければダメなのですが、そこは良いですか?

    チェックすべきは、#5 で要求が正しく出ているか、HTTP 200 応答が返ってきているか、応答ヘッダにある MIME タイプと画像のサイズが正しいかです。

    HexView を見ると画像のバイト列(下の応答の黒文字の部分)が分かりますのでそれもチェックしてみてください。

    以上を うまくいく場合と行かない場合で比べてみる と解決のためのヒントが見つかるのではないかと思います。

    その前に、「TopPage.aspxは、このMasterファイルを継承」とか head 要素の中に Image コントロールがあるとか、どう考えても普通ではないように見えます。それでうまくいくとは思えないのですが、開発環境では問題なかったというのが解せません。

    以下の画像は上の Fiddler の画像を得るため自分が作ったサンプルコードですが、どうしてもうまくいかない&原因も分からない場合は、ここまで簡略化して試してみてはいかがですか。

    • 回答としてマーク ssssssssssf 2019年12月10日 12:06
    2019年12月9日 1:47

すべての返信

  • もう一点確認した事項があります。

    ・「http://localhost/WebTest/Images/Logo.png」でアクセスしたところ、何も表示されませんでした。

    エラーも出ていません。ただ、左上の「×」も出ません。

    エラーが出ていないということは、アクセスはできていると考えています。


    2019年12月7日 14:47
  • Fiddler や開発者ツールで要求・応答をキャプチャーして内容を見てください。そこにヒントが見つかると思います。

    その前に、試す前にはその都度ブラウザのキャッシュを消去してください。

    追記: 想像でレスして想像が間違っていると混乱を招くのですが、想像ベースで一言言うと、こういうケースでありがちなのがファイルが存在しないかパスが間違っているということです。Fiddler で見て 404 エラーが返ってきていたらその可能性が高いです。そうでなくてもヒントは得られるのではないかと思います。調べてみてください。

    • 編集済み SurferOnWww 2019年12月7日 23:39 追記
    2019年12月7日 21:38
  • アドバイスいただきありがとうございます。

    ブラウザのキャッシュを消去してから、Fiddlerを立ち上げ、localhostでアプリケーションにアクセスしてみました。

    #キャプチャした画面を画像で載せたかったのですが、画像を挿入すると投稿できなかったため、諦めました。

    Logo.png含め、Resultは200で返ってきているので、成功している模様です。

    Fiddlerもといネットワークの知識が全くなく、キャプチャーしたもののどのデータをチェックすれば良いかわかりません。

    次に調べるべき方法をご教示いただけないでしょうか。

    2019年12月8日 18:12
  • Image1のImageURLに存在しないファイル名「Logo1.png」を指定して、キャプチャをとった場合、確かにResultは404でした。

    2019年12月8日 18:17
  • > Fiddlerもといネットワークの知識が全くなく、キャプチャーしたもののどのデータをチェックすれば良いかわかりません。

    正しい応答・要求を見ていますか? Page/TopPage.aspx にアクセスしたのであれば、下の画像の #3 の行が TopPage.aspx 本体のもので、#5 が Images/Logo.png のものです。なので #5 を見なければダメなのですが、そこは良いですか?

    チェックすべきは、#5 で要求が正しく出ているか、HTTP 200 応答が返ってきているか、応答ヘッダにある MIME タイプと画像のサイズが正しいかです。

    HexView を見ると画像のバイト列(下の応答の黒文字の部分)が分かりますのでそれもチェックしてみてください。

    以上を うまくいく場合と行かない場合で比べてみる と解決のためのヒントが見つかるのではないかと思います。

    その前に、「TopPage.aspxは、このMasterファイルを継承」とか head 要素の中に Image コントロールがあるとか、どう考えても普通ではないように見えます。それでうまくいくとは思えないのですが、開発環境では問題なかったというのが解せません。

    以下の画像は上の Fiddler の画像を得るため自分が作ったサンプルコードですが、どうしてもうまくいかない&原因も分からない場合は、ここまで簡略化して試してみてはいかがですか。

    • 回答としてマーク ssssssssssf 2019年12月10日 12:06
    2019年12月9日 1:47
  • 関係があるか分かりませんが、古いバージョンの MVC を使っている場合は解釈が変わるようです。

    src 指定を一時的に、
    http://localhost/WebTest/Page/../Images/Logo.png
    http://localhost/WebTest/Images/Logo.png
    指定した場合にも、画像のロードが失敗してしまうのか確認してみては如何でしょう。

    相対パスの指定に問題が無かったのだとしたら、<head> タグ内の <base> タグにて相対パスの基準 URI が変更されているとか…。

    • 回答としてマーク ssssssssssf 2019年12月10日 12:06
    • 回答としてマークされていない ssssssssssf 2019年12月10日 12:06
    2019年12月9日 2:38
  • > 関係があるか分かりませんが、古いバージョンの MVC を使っている場合は解釈が変わるようです。

    紹介されている記事は .NET Framework ベースの(=CORE ではない)最新の MVC5 のものです。

    質問者さんのアプリはサーバーコントロールを使う ASP.NET Web Forms アプリのようです。何にせよ、ルート演算子 (~) を使っているのでパスの問題は回避できていると思うのですが、それで問題が出るのが不可解です。ということで、Fiddler で違いを調べることを自分はお勧めしています。

    2019年12月9日 4:20
  • SurferOnWwwさん

    ご丁寧にありがとうございます。

    おかげで問題は、Contents-Lengthにあることがわかりました。

    やはり、応答結果は200で、Contents-Typeも、image/pngでしたが、Contents-Lengthが0でした。

    ただ、Contents-Lengthが0になる原因がインターネットで検索しても、有益な情報は得られず、解決には至っていません。

    何度も申し訳ないですが、Contents-Lengthが0になる可能性を教えていただけないでしょうか。

    なお、新規にアプリケーション直下にWebフォームを作成し、Imageコントロールの追加とImageURLのプロパティを設定しただけでも、Contents-Lengthが0で表示できませんでした。

    >その前に、「TopPage.aspxは、このMasterファイルを継承」とか head 要素の中に Image コントロールがあるとか、どう考えても普通ではないように見えます。それでうまくいくとは思えないのですが、開発環境では問題なかったというのが解せません。

    これは、投稿時にaspxの中身を割愛して載せたため、誤解させてしまったかもしれません。

    Image1はhead要素ではなく、formタグの中のheaderタグに定義しております。

    HTMLの参考書に、divだけでなく、ヘッダーのタグには、headerタグを使用すべきと言う内容を受けて、使ってみたところです。

    2019年12月9日 18:48
  • 魔界の仮面弁士さん

    アドバイスいただきありがとうございます。

    SuferOnWwwさんのおっしゃるとおり、MVCではなく、シンプルなWebFormで勉強しています。

    アドバイスいただいたとおり、WebTest直下に新規にWebFormを作成して、Imageコントールを設定しましたが、結果は同じで表示できませんでした。

    SuferOnWwwさんのおかげで、レスポンスのContents-Lengthに問題があるところまでは、わかりました。

    2019年12月9日 18:55
  • 全く論点は違うとは思うのですが、TopPage.aspxのPage_Load()の中に、

    Response.ContentsType="image/png"

    Response.WriteFile("~/Images/Logo.png")

    Response.End()

    と、コーディングすると、

    TopPage.aspx本来の画面構成はなくなるのですが、

    Logo.pngが表示されることは確認できました。

    全くもって初心者のイメージですが、

    今回問題となるGet /WebTest/Images/Logo.png HTTP/1.1 のリクエストヘッダに対するレスポンスに

    何らかLogo.pngのデータを設定するコーディングが必要なのでしょうか。

    2019年12月9日 19:02
  • コントロールパネル→Windowsの機能の有効化または無効化から、

    インターネットインフォメーションサービス→World Wide Web サービス→HTTP 共通機能→静的なコンテンツ

    のチェックはついているでしょうか?

    // 以前これではまったことがあったので…。

    • 回答としてマーク ssssssssssf 2019年12月10日 12:06
    2019年12月9日 21:35
  • Response.WriteFile で画像が表示されたのは TopPage.aspx のコードが動的に画像ファイルを取得してきて応答を返したからでしょう。Image コントロールを使った場合は静的ファイルとして扱われますが、静的ファイルを扱う HTTP ハンドラは .aspx を扱う HTTP ハンドラとは異なります。その違いが結果に現れたのだと思われます。Honglang さんのレスにある Windows の機能の有効化をチェックしてみてください。 


    • 編集済み SurferOnWww 2019年12月9日 22:49 訂正
    2019年12月9日 22:49
  • Hongliangさん

    ありがとうございます。

    静的なコンテンツをチェックをつけましたら、正しく画像を表示することができました。

    SuferOnWwwさん

    長い間、ご丁寧に教えていただきありがとうございました。

    Fiddlerの使い方や要求と応答の勉強にもなりました。

    これからも励みます。

    2019年12月10日 12:03