Отображение изображения, содержащегося в байте[] с помощью ASP.Net MVC3

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

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

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

20
asp.net-mvc asp.net-mvc-3 c# razor strong-typing

6 ответов

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

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

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

17

Это зависит от того, насколько большой изображение. Если он маленький, вы можете написать что-то, чтобы 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" ... />

(используя синтаксис razor, но аналогичный для aspx).

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

8

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

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

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

7

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

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

4
1

Я бы разработал простой универсальный обработчик для обслуживания ваших изображений. Этот обработчик может, учитывая некоторый параметр, загружать изображения из базы данных и записывать их в поток вывода 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);
    }
}
0