画像はasp.net MVCで表示されませんでした。

Question

私はasp.net MVCの新機能です。最後の2日間は、cshtmlの画像をSQLデータベースから表示しようとしています。ここで

は、データベースから画像を取得するための方法である：

public class ProfilePicture:Gateway 
    { 
     public byte[] ShowProfilePicture() 
     { 
      Query = "SELECT * FROM t_ProfilePicture WHERE UserId='" + 1 + "'"; 
      Command = new SqlCommand(Query, Connection); 
      Connection.Open(); 
      Reader = Command.ExecuteReader(); 
      byte[] image = null; 
       while (Reader.Read()) 
       { 
        image = (byte[])Reader["ProfilePictureFile"]; 
       } 
      Reader.Close(); 
      Connection.Close(); 
      return image; 
     } 
    } 

これはバイトのデータを取得するためのHTMLヘルパーコードです&をbase64に変換します

@{ 
    ProfilePicture aProfilePicture = new ProfilePicture(); 
    var image = aProfilePicture.ShowProfilePicture(); 
    string string64 = Convert.ToBase64String(image); 
    ViewBag.profilePicture = "data:image/png;base64," + string64;  
} 

そしてここにはあります<img>タグ：

<img id="profilePicture" src="@ViewBag.profilePicture" alt="profilePicture" /> 

ほとんどすべてthisなどの利用可能なソリューション。しかし、まだ解決策はありませんでした。

ありがとうございました。

Answer 1

あなたは、これはあなたが解決策は、あなたのために働くか、他の実装に開いている場合でも、あなたの画像を表示する方法ですか？

通常、パフォーマンスとコストの理由から、イメージとバイナリデータをデータベースに保存しないでください。また、イメージバイナリデータをページに埋め込むことも必要ありません。ページの読み込み時間が短縮され、すぐに使用できる最適化機能が多数組み込まれています（IISのキャッシュ、ブラウザのキャッシュ、圧縮など）。

ディスク上のイメージとデータベース内のパスを指定すると、パスにURLとして "src"プロパティを使用してHTML img要素が構築されます。

イメージをデータベースに保存する必要がある場合でも、バイナリデータをディスクに保存し、バイト配列を埋め込むのではなく、そこから提供する方がよい場合があります。

このオプションを熟読したい場合は、さらに詳しい情報を提供できます。あなたのビューで

-------更新2月、3月17日-------

、あなたは関係なく、それの、保存された画像へのリンクがHTMLイメージを構築したいです

<img src='@Url.Action("GetProfileImage", "User", new { Model.UserName })'/> 

または例えば、あなたのビューモデルにリンクすることにより：画像のパスを格納するように

<img src= "@Url.Content(Model.ImagePath)" alt="Image" /> 

ようなコントローラのアクションへのリンクのいずれかを使用して、データベース内またはディスク上に格納されていますあなたのデータベースには、 たくさんの方法。サイト内のディレクトリに画像を保存するための単純な実装はaccepted answer in this post次のようになります。

public ActionResult FileUpload(HttpPostedFileBase file) 
{ 

    if (file != null) 
    { 
     Database1Entities db = new Database1Entities(); 
     string ImageName = System.IO.Path.GetFileName(file.FileName); 
     string physicalPath =Server.MapPath("~/images/"+ ImageName); 

     // save image in folder 
     file.SaveAs(physicalPath); 

     //save new record in database 
     tblA newRecord = new tblA(); 
     newRecord.fname = Request.Form["fname"]; 
     newRecord.lname = Request.Form["lname"]; 
     newRecord.imageUrl = ImageName; 
     db.tblAs.Add(newRecord); 
     db.SaveChanges(); 

    } 
    //Display records 
    return RedirectToAction("../home/Display/"); 
} 

表示のための私の推薦は、データベースから画像のパスを取得し、リンクを返すコントローラを実装することであろう、 this postのように：

public ActionResult Image(string id) 
{ 
    var dir = Server.MapPath("/Images"); 
    var path = Path.Combine(dir, id + ".jpg"); //validate the path for security or use other means to generate the path. 
    return base.File(path, "image/jpeg"); 
} 

Answer 2

Html.Rawを試してみてください。その上で起こっていくつかのエンコーディングが問題を引き起こしているがあるかもしれません。

<img id="profilePicture" src="@Html.Raw(ViewBag.profilePicture)" alt="profilePicture" />