Показать изображение, содержащееся в байте [] с ASP.Net MVC3 - PullRequest
20 голосов
/ 18 мая 2011

У меня есть представление со строгим шрифтом.Этот сильный тип имеет поле, состоящее из байта [], этот массив содержит изображение.

Можно ли отобразить это изображение с чем-то вроде @ Html.Image (Model.myImage)?

Большое спасибо

Ответы [ 6 ]

17 голосов
/ 18 мая 2011

Вы можете создать метод действия контроллера, который возвращает изображение в виде FileContentResult:

public FileContentResult Display(string id) {
   byte[] byteArray = GetImageFromDB(id);
   return new FileContentResult(byteArray, "image/jpeg");
}

Затем вы можете создать ActionLink для метода действия в представлении, используя идентификатор изображения из модели.

8 голосов
/ 18 мая 2011

Зависит от того, насколько велико изображение.Если оно маленькое, вы можете написать что-нибудь для base-64, кодировать его и вставить в html, , как любой из этих .

Для конкретного примера отсюда :

<img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=" alt="British Blog Directory" width="80" height="15">

Если изображение имеет какой-либо заметный размер, вы можете вместо этого написать маршрут, который позволяет осуществлять поиск с помощью некоторого ключа к изображению, то есть маршрута, подобного /images/{id} - в этом маршруте выизвлеките двоичный файл изображения и используйте return File(bytes, contentType), дополнительно устанавливая заголовки кэширования (и не забудьте перепроверить все необходимые меры безопасности).В вашем html вы бы просто имели

<img src="/images/@imageId" ... />

(используя синтаксис бритвы, но похожий на aspx).

Подход с отдельным маршрутом требует дополнительного перехода к серверу, но позволяет кэшировать наклиент (подход inline base-64 помещает данные в каждый запрос).

7 голосов
/ 27 сентября 2013

Если у вас уже есть изображение, загруженное в вашу модель в виде массива byte[], вы можете сделать это, как @Marc Gravell упоминает в его ответ:

<img src="data:image;base64,@System.Convert.ToBase64String(Model.Photo)" />

Это значительно упрощает весь процесс, и вам не нужно будет иметь конкретный метод действия FileContentResult и снова нажимать на базу данных (см. @Dmitry S's answer ), просто чтобы получить этот массив byte[] с вашим изображением / фотографией, поскольку он уже загружен в вашу модель.

4 голосов
/ 18 мая 2011

Похоже, вам нужно новое действие, которое получает байтовый массив (из базы данных?) И возвращает изображение с помощью метода File ....

Затем создайте привязку, которая указывает на это действие, чтобы изображение могло загружаться во время загрузки страницы, ускоряя отображение.

1 голос
/ 12 сентября 2011
0 голосов
/ 18 мая 2011

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

public class UserImage : IHttpHandler
{
    public bool IsReusable
    {
        get { return false; }
    }

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/jpeg";

        // Get the stream from the database
        var image = System.Drawing.Image.FromStream(stream);

        image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
    }
}
...