7

ASP.NET MVC4 を使用して画像をアップロード/表示する Web サイトを構築していますが、画像を表示する方法がいくつか見つかりました。主に以下のとおりです。

1)画像をファイルとしてサーバーにローカルに保存し、相対パスを使用してページに表示します。

 //ImageFile is a property which holds a path to the image in the model
 <img src="@item.ImageFile" />

 When the page is rendered, this becomes a path like - <img src="/Content/Images/Jellyfish.jpg" />

2)画像をバイト配列として保存し、コントローラ アクションを使用して取得します -

//Use a controller action (GetImg) to get the URL of the image
<img src="@Url.Action("GetImg", "ViewPhotos", new { id = item.ID })" alt="Image" />  

When the page is rendered, this becomes a path like - <img src="/ViewPhotos/GetImg/4" alt="Image" />

3）画像をバイト配列として保存し、ビューで直接取得します-

//Directly re-construct the image in the view from the byte array (Image property of the model)
<img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.Image))" />  

When the page is rendered, this becomes a path like - <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgEA....<long string> .../>

私の質問は -

1) 1 と 2 の違いは何ですか?

1 はファイルへのパスを直接提供し、2 はファイルへの URL を提供します。それらはバックグラウンドで同じですか、それとも一方のアプローチが他方よりも優れていますか?

ここで確認したところ、Url.Action はアクションへのパスを構築し、アクションの実行結果ではなく、URL を返します。では、結果はいつ取得されますか?

2) 1 または 2 に対して 3 を使用すると、パフォーマンスに影響がありますか?

3) 画像サイズが小さい場合 (1MB 未満) と大きい場合、どちらのアプローチを使用する必要がありますか?

参考になるリンクがあれば教えていただけると幸いです。ありがとう。

コード -

//モデル

public class Photo
{
  public int ID { get; set; }
  public string ImageFile { get; set; }
  public byte[] Image { get; set; }
  public string Caption { get; set; }
}

//コントローラ

public FileContentResult GetImg(int id)
{
    byte[] byteArray = db.Photos.Find(id).Image;
    if (byteArray != null)
    {
        return new FileContentResult(byteArray, "image/jpeg");
    }
    else
    {
         return null;
    }
}

//表示 (アプローチ 2)

@model IEnumerable<MyPhotoLibrary.Models.Photo>
@foreach (var item in Model) {
<tr>
  <td>
    <img src="@Url.Action("GetImg", "ViewPhotos", new { id = item.ID })" alt="Image" />
  </td>
</tr>
}

//表示 (これはアプローチ 3 です)

@model IEnumerable<MyPhotoLibrary.Models.Photo>
@foreach (var item in Model) {
<tr>
  <td>
    <img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.Image))" />
  </td>
</tr>
}
4

3 に答える 3

2

1) 関数呼び出しが少なくなるため、サーバー側での処理が少なくなります。アクションの出力をレンダリングする場合は、HTML ヘルパー メソッド Html.RenderAction または Html.Action を呼び出す必要があります。違いについてはこちらをご覧ください。

2) 2 と 3 の違いは、バイト配列を直接入力すると、サーバーへのラウンドトリップ (DNS ルックアップなど) が少なくなりますが、1 回の要求でダウンロードするデータが多くなります。一部のブラウザは、コンテンツを並行してダウンロードする場合があります (ドメインごとに 5 ～ 8 の並行ダウンロード)。そのため、3 つを使用すると、ページの読み込み速度が遅くなります。並列ダウンロードの詳細はこちらとこちら

これにより、3) 画像が小さい場合は 3 が適しています。これは、クライアントが要求するリソースが少なくなり、ページの読み込みが速くなるためです。ただし、画像が大きい場合は 1 を使用する必要があります。

于 2013-05-31T11:02:43.767 に答える
1

パフォーマンスをテストする時間はありませんが、いくつかポイントを残しておきます。

アプローチ 1 では、HDD ストレージとパフォーマンスのみに依存してファイルを保持し、静的ファイルを配信する Web サーバー機能に依存しています。

アプローチ 2 では、リクエストがあるたびにバイトストリームを生成しています... ストレージと検索は DB 駆動型 (HDD はもちろん役割を果たします) であり、関連するコードを追加せずに Web サーバーのネイティブ キャッシュ機能を活用することはできません。 (これは単なる属性かもしれませんが、OutputCacheより複雑になる可能性があります)。

アプローチ 3 では、クライアントはレンダリングするだけで、Web ページと一緒に画像を送信しています。ここでのパフォーマンスはブラウザーに大きく依存しますが、画像が非常に大きい場合、ページ全体を受信するのに時間がかかることに注意してください。

したがって、私は一般的にアプローチ1を好みます.dbに画像パスを保存するだけでよく、ディスクから画像を取得して、IISにキャッシュ、配信、最適化などを行わせることができます.

アプローチ 2 を採用する正当な理由はたくさんあります。これは主に、分散型 Web サーバー アーキテクチャを使用している場合です。アプローチ 1 は、各サーバーが HDD にイメージのコピーを保持し、すべてを 1 か所に保持する必要があることを意味します。 DB では、必要なときに iamges を取得できることを意味します...おそらく、各リクエストで DB にヒットするのを避けるために、少しキャッシュを実装します。

アプローチ 3 は、実際には 1 回限りの小さな画像のみを対象としています。あらゆる場所で使用されるアイコンや画像にこれを使用したくないため、単一使用と言います。これらは静的なままにして、クライアントがキャッシュできるようにする必要があります。

より良い決定を下すのに役立つことを願っています。

2 に似たシナリオでは、複数の Web サーバー アーキテクチャを使用して、過去の仕事で混合ソリューションを使用しました。画像は DB 上にありましたが、各 Web サーバーは、画像の 404 をヒットした後の最初の要求で、 DB からイメージをダウンロードし、クライアントに再試行するように指示します (これは、ある意味で、キャッシングの非常に生の実装です)。

于 2013-05-31T11:25:21.640 に答える