Изображение не показано в asp.net MVC View

Question

Я очень новичок в asp.net MVC. За последние два дня я пытаюсь показать изображение в 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> tag:

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

Я почти слежу за всеми доступные решения, включая this. Но пока не получил никакого решения.

Спасибо за любую помощь.

Answer 1

Вы уверены, что это, как вы хотите, чтобы отобразить изображение, даже если решение работает для вас, или вы открыты для других реализаций?

Обычно лучше не хранить изображения и двоичные данные в базе данных (по соображениям производительности и стоимости), и вы также не хотите вставлять двоичные данные изображения на страницу так, как вы это делаете, так как это увеличит время загрузки страницы и вы не сможете использовать множество встроенных функций для оптимизации из коробки (кеширование IIS, кеширование браузера, сжатие ...)

Лучшим подходом может быть сохранение образ на диске и путь в базе данных, в вашем коде создается элемент HTML img с использованием свойства «src» с указанием пути в качестве URL-адреса.

Даже если вам все равно нужно сохранить изображение в базе данных, вам может быть лучше сохранить двоичные данные на диск и оттуда оттуда вместо того, чтобы встраивать массив байтов.

Я могу предоставить вам дополнительную информацию, если вы хотите ознакомиться с этой опцией.

------- Обновление февраль-03-17 -------

По вашему мнению, вы хотите построить HTML файл со ссылкой на сохраняемое изображение, независимо от него которые хранятся в базе данных или на диске либо с помощью ссылки на действия контроллера, такие как:

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

или по ссылке в ваших ViewModel, такие как:

<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" />