19

画像をアップロード/表示する Web サイトを作成しようとしています (MVC4 を使用)。サーバーの App_Data\Images フォルダーの下にローカルに保存されている画像を取得するために、以下のコードを作成しました。画像のパスは、モデルの ImageFile プロパティに格納されます。

ビューはさまざまな画像の ID、キャプションをレンダリングしますが、画像は読み込まれません。イメージ ファイルは、ImageFile プロパティに対して保存されたパスに存在します。どうすればこれを修正できますか?

//モデル

public class Photo
{
    public int ID { get; set; }

    public string ImageFile { get; set; } //This contains a path where the image is locally stored on the server
    public string Caption { get; set; }
byte[] Image { get; set; } 
}

//コントローラ

private PhotoDBContext db = new PhotoDBContext();

public ActionResult Index()
{
    return View(db.Photos.ToList());
}

//意見

@model IEnumerable<MyPhotoLibrary.Models.Photo>

<table>
 @foreach (var item in Model) {
 <tr>
    <td>
        <img src="@Url.Content(item.ImageFile)" alt="" />
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Caption)
    </td>
 </tr>
 }
</table>

また、(ファイルを物理的に保存してファイル パスを使用する代わりに) イメージをバイト配列として保存する場合、イメージを再作成してビューに表示するにはどうすればよいですか。つまり、ビューでモデルを反復処理しながら、バイト配列から画像を再作成するにはどうすればよいですか?

編集

以下を実行することで表示の問題を解決できました（両方が必要です）-1）パスを相対パスに変更しました2）画像をApp_Data以外の別のフォルダーに移動しました。（これを見つけた）

ありがとう。

4

2 に答える 2

3

MVC4 でも、ハンドラーを使用してこれを行うことができます。これは私が以前に作ったものの例です：

public class ImageHandler : IHttpHandler
{
    byte[] bytes;

    public void ProcessRequest(HttpContext context)
    {
        int param;
        if (int.TryParse(context.Request.QueryString["id"], out param))
        {
            using (var db = new MusicLibContext())
            {
                if (param == -1)
                {
                    bytes = File.ReadAllBytes(HttpContext.Current.Server.MapPath("~/Images/add.png"));

                    context.Response.ContentType = "image/png";
                }
                else
                {
                    var data = (from x in db.Images
                                where x.ImageID == (short)param
                                select x).FirstOrDefault();

                    bytes = data.ImageData;

                    context.Response.ContentType = "image/" + data.ImageFileType;
                }

                context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
                context.Response.BinaryWrite(bytes);
                context.Response.Flush();
                context.Response.End();
            }
        }
        else
        {
            //image not found
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

ビューで、写真の ID をハンドラーのクエリ文字列に追加しました。

于 2013-05-30T15:32:31.243 に答える