none
Windwos Server IIS環境でイメージを表示させたい RRS feed

  • 質問

  • 下記、<環境:開発>では、下記、<表示方法1>、<表示方法2>はイメージは表示されます。
    しかし、
    下記、<サーバ環境>では、<表示方法1>は表示されますが、<表示方法2>では表示できません。
    どのようしたらよいのでしょうか。
    以上、よろしくお願いいたします。


    <表示方法1>
    <img src="~/images/icon/img01.png" />

    <表示方法2>
    for (var i in items) {
                var h
                    = '<tr>'
                    + '<td><img src="http://' + location.host + '/images/icon/'
                    + items[i].icon
                    + '" /></td>'
                    + '</tr>';
                $("#list").append(h);
    }

    <環境:開発>
    Visusal Studio 2019
    asp.net core mvc
    .net core 3.1

    <サーバ環境>
    Windows Server 2019
    .net core 3.1
    IIS 10.0
    2020年4月28日 11:25

回答

  • 【追記】

    <サーバ環境> で <表示方法2> で画像が表示されない原因として考えられるのは src 属性に設定されているパスが間違っているからだと思われます。それ以外の原因は、今提供されている情報では思い当たりません。

    なので html ソースがどうなっているかを聞いているのですが、返事がない・・・

    なぜ <サーバ環境> の <表示方法2> でパスが間違っているかというと、これも想像ですが、<サーバ環境> ではアプリはあるサイト下にアプリケーションとして配置されたからであろうと思われます。<環境:開発> ではサイト扱いになっているはずです。launchSettings.json を見てください。

    その想像が当たっているとすると、なぜ <環境:開発> と <サーバ環境> のどちらでも <表示方法1> の、

    <img src="~/images/icon/img01.png" />

    では問題なく表示されたかと言うと、アプリケーションルート演算子 ~ が使われていて、それがパスの問題を解決しているからです。<表示方法1> の html ソースを見ると以下のようになっていませんか?

    <環境:開発>: <img src="/images/icon/img01.png" />
    <サーバ環境>: <img src="/<アプリケーション名>/images/icon/img01.png" />

    一方、<表示方法2> の方は <環境:開発> と <サーバ環境> のいずれも html ソースは以下のような絶対 URL になるはずです。

    <img src="http://<ホスト名>/images/icon/img01.png" />

    <サーバ環境> でアプリがアプリケーションとして配置されている場合は上の src 属性ではダメですよね。以下のようにしなければなりません。

    <img src="http://<ホスト名>/<アプリケーション名>/images/icon/img01.png" />

    だから <サーバ環境> で <表示方法2> で画像が表示されないのでしょう。上に述べたように想像が混じってますが、自信度 99% ぐらいはあります。
    • 編集済み SurferOnWww 2020年4月29日 1:54 誤字訂正
    • 回答としてマーク sun_sun_sun 2020年5月3日 10:09
    2020年4月29日 1:53

すべての返信

  • html ソースはどうなってますか? <環境:開発> と <サーバ環境> で <表示方法1> と <表示方法2> それぞれ 4 通りどうなっているのか書いてください。


    • 編集済み SurferOnWww 2020年4月28日 13:29 訂正
    2020年4月28日 13:27
  • 【追記】

    <サーバ環境> で <表示方法2> で画像が表示されない原因として考えられるのは src 属性に設定されているパスが間違っているからだと思われます。それ以外の原因は、今提供されている情報では思い当たりません。

    なので html ソースがどうなっているかを聞いているのですが、返事がない・・・

    なぜ <サーバ環境> の <表示方法2> でパスが間違っているかというと、これも想像ですが、<サーバ環境> ではアプリはあるサイト下にアプリケーションとして配置されたからであろうと思われます。<環境:開発> ではサイト扱いになっているはずです。launchSettings.json を見てください。

    その想像が当たっているとすると、なぜ <環境:開発> と <サーバ環境> のどちらでも <表示方法1> の、

    <img src="~/images/icon/img01.png" />

    では問題なく表示されたかと言うと、アプリケーションルート演算子 ~ が使われていて、それがパスの問題を解決しているからです。<表示方法1> の html ソースを見ると以下のようになっていませんか?

    <環境:開発>: <img src="/images/icon/img01.png" />
    <サーバ環境>: <img src="/<アプリケーション名>/images/icon/img01.png" />

    一方、<表示方法2> の方は <環境:開発> と <サーバ環境> のいずれも html ソースは以下のような絶対 URL になるはずです。

    <img src="http://<ホスト名>/images/icon/img01.png" />

    <サーバ環境> でアプリがアプリケーションとして配置されている場合は上の src 属性ではダメですよね。以下のようにしなければなりません。

    <img src="http://<ホスト名>/<アプリケーション名>/images/icon/img01.png" />

    だから <サーバ環境> で <表示方法2> で画像が表示されないのでしょう。上に述べたように想像が混じってますが、自信度 99% ぐらいはあります。
    • 編集済み SurferOnWww 2020年4月29日 1:54 誤字訂正
    • 回答としてマーク sun_sun_sun 2020年5月3日 10:09
    2020年4月29日 1:53
  • SurferOnWww 様

    返信が遅くなり申し訳ございません。
    下記の2つ(<表示方法2ー1>,<表示方法2ー2>) を試してみました。
    開発環境Visual Studioでは、<表示方法2ー1>は表示されましたが、<表示方法2ー2>は表示されませんでした。
    サーバ環境では、<表示方法2ー1>は表示されませんでしたか、<表示方法2ー2>は表示されました。
    現在の私の設定(launchSettings.json等)では、ご指摘の通り、「/<アプリケーション名>」がないとサーバ環境では表示されないのですね。
    ありがとうございました。

    <表示方法2ー1>
    var h
        = '<tr>'
        + '<td><img src="http://' + location.host + '/images/icon/test01.png" /></td>'
        + '</tr>';
        $("#list").append(h);
    <表示方法2ー2>
    var h
        = '<tr>'
        + '<td><img src="http://'' + location.host + '/<アプリケーション名>/images/icon/test02.png" /></td>'
        + '</tr>';
        $("#list").append(h);

    上記「http://'」の個所は、半角にして読み替えて頂けると幸いです。
    「お客様のアカウントが確認されるまで、本文に画像やリンクを含むことができません」と表示され、
    投稿できなかったため。

    2020年5月3日 10:08