c# - net - mostrar imagen mvc 5

Mostrar una imagen contenida en un byte[] con ASP.Net MVC3

Question

Tengo una vista con un tipo fuerte. Este tipo fuerte tiene un campo que consta de un byte [], esta matriz contiene una imagen.

¿Es posible mostrar esta imagen con algo como @ Html.Image (Model.myImage)?

Muchas gracias

Answer 1

Depende de cuán grande sea la imagen. Si es pequeño, puedes escribir algo para codificarlo en base-64 e incrustarlo en el html, como cualquiera de estos .

Para un ejemplo concreto desde aquí :

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

Si la imagen es de un tamaño apreciable, es posible que desee escribir una ruta que permita la búsqueda a través de alguna clave de la imagen, es decir, una ruta como /images/{id} : en esa ruta, obtiene el binario de la imagen y utiliza el return File(bytes, contentType) , además de configurar encabezados de almacenamiento en caché (y recuerde volver a verificar cualquier seguridad necesaria). En tu html solo tendrías un

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

(usando la sintaxis de la maquinilla de afeitar, pero similar para aspx).

El enfoque de ruta independiente requiere un salto adicional al servidor, pero permite el almacenamiento en caché en el cliente (el enfoque en línea de base 64 coloca los datos en cada solicitud).

Answer 2

Diseñaría un controlador genérico simple para servir tus imágenes. Este controlador podría, dado algún parámetro, cargar imágenes de la base de datos y escribirlas en el flujo de salida 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);
}
}

Answer 3

Mira la clase de imagen web.

http://msdn.microsoft.com/en-us/library/system.web.helpers.webimage(v=vs.99).aspx

Answer 4

Parece que necesitaría una nueva acción que obtiene la matriz de bytes (¿de una base de datos?) Y devuelve la imagen a través del método de File ...

Luego genere un anclaje que apunte a esa acción, de esa manera la imagen se puede cargar mientras la página se está cargando, acelerando la visualización.

Answer 5

Puede crear un método de acción del controlador que devuelva una imagen como FileContentResult:

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

Luego, puede crear un ActionLink al método de acción en la vista utilizando la ID de imagen del modelo.

Answer 6

Si ya tiene la imagen cargada en su modelo como una matriz de byte[] , puede hacer esto como @Marc Gravell menciona en su respuesta:

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

Esto simplifica enormemente todo el proceso y no necesitará tener un método de acción específico de FileContentResult y volver a golpear la base de datos (ver la answer @Dmitry S) solo para obtener esa matriz de byte[] con su imagen / foto, ya que ya la tiene cargada en tu modelo