asp.net-mvc-3 - net - razor if

¿Visualiza la imagen de la base de datos(bytes[]) en Razor/MVC3?

Question

Estoy devolviendo un conjunto de datos de mi base de datos MS SQL 2008R2 que contiene una tabla de datos de la que ya estoy obteniendo datos en mi vista Razor. Agregué un campo byte [] que contiene una miniatura de imagen que estoy tratando de mostrar en esa vista.

Como la matriz de bytes es relativamente pequeña, pensé que intentaría mostrar la matriz de bytes en línea. Sin embargo, después de leer puede haber algunos problemas relacionados con el navegador, abandoné esto.

Crear un método de controlador parecía ser el camino a seguir (ambos métodos se encuentran here ), sin embargo, ya tengo la matriz de bytes lista para entrar en mi vista, y no es necesario hacer otra llamada de base de datos para obtenerla en base a una ID.

Hacer esto, no funciona por razones obvias:

... mostrando otros datos en la página ...

@if (Model.dsResults.Tables[0].Rows[i]["ImageBytes"] == null)
{
    <img src="@Url.Content("~/Content/Images/NoPhoto.png")" border="0" />
}
else
{
    <img src="@Url.Action("GetImage", "SearchResults", new { imageBytes = Model.dsResults.Tables[0].Rows[i]["ImageBytes"] })" alt="Product Image" />
}

...

Método del controlador:

[Authorize]
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetImage(byte[] imageBytes)
{
    byte[] byteArray = imageBytes;
    return new FileContentResult(byteArray, "image/jpeg");
}

... como esto esencialmente está intentando enviar la matriz de bytes sobre http.

Entonces, mi pregunta es, dado que ya tengo la matriz de bytes en mi vista Razor, ¿cómo la visualizo?

- Actualización -

Me doy cuenta de que no se recomienda hacer el procesamiento en la vista, pero como los datos ya están allí, no se puede hacer algo como esto:

Response.Write((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]);

O...

Stream s = new MemoryStream(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]));
System.Drawing.Image img = new System.Drawing.Bitmap(s);

En otras publicaciones, he leído que haces un Response.Write (byte [] ...)) pero esto no funciona en este caso.

- ACTUALIZAR -

En mi búsqueda continua de eficiencia (sin tener que hacer otra solicitud al DB), el ayudante de WebImage parece ser un buen candidato. Uno de sus constructores aceptará una matriz de bytes para inicializar la clase, y luego, usando el método .Write ("jpeg"), puedo ver la imagen.

<td>
    @{
        WebImage webImage = new WebImage(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]));
        webImage.Write("jpeg");
    }
</td>

El problema con el uso de WebImage.Write () es que una vez utilizado, la imagen es lo único que se representa en la página. ¿Hay alguna manera de mostrar esto directamente a un "control" en una página de vista Razor?

- ACTUALIZACIÓN -

Esto sigue molestándome ... así que probé lo siguiente, lo cual pensé que podría funcionar, ya que esto es lo que estamos haciendo desde la Acción ...

if (Model.dsResults.Tables[0].Rows[i]["ImageBytes"] != DBNull.Value)
{
    var img1 = new FileContentResult(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]), "image/jpeg");
    <text>
        <img src="@new FileContentResult(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]), "image/jpeg")" />
    </text>
}

... no funciona

Answer 1

Esta es una forma de evitar el segundo viaje innecesario a la base de datos. memorystream to Image pero viene con su propio problema cuando se usa en IE9 (todos los demás navegadores y versiones de IE parecen funcionar bien).

Se puede encontrar más información sobre el problema aquí. Más detalles sobre el problema .

Al final, por no tener un truco para lo que creo que es probablemente un error en IE9, fui con las ''dos'' lecturas, pero no debería haber una necesidad.

Answer 2

Eventualmente, fui por la ruta de los dos viajes. Muy ineficiente, ya que los bytes de la imagen ya estaban listos para entrar en la vista. Debería haber un control de imagen web auxiliar que represente la imagen directamente desde la matriz de bytes de la imagen (o tipo de imagen). Tal vez lo hay y me lo perdí.

Para obtener los bytes (sí, todo de nuevo):

    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult GetThumbnailImage(string itemListID)
    {
        byte[] imageBytes = null;

        client = new FeederServiceClient();
        imageBytes = client.GetItemThumbnail( itemListID );

        if (imageBytes == null)
        {
            return new FilePathResult("~/Content/Images/NoPhoto.png", "image/png");
        }
        else
        {
            return new FileContentResult(imageBytes, "image/jpeg");
        }
    }

Entonces para mostrar la imagen:

<img src="@Url.Content("~/Thumbnails/" + @Model.dsResults.Tables[0].Rows[i]["ItemListID"] )" />

Con la siguiente ruta colocada en Global.asax:

routes.MapRoute(name: "Thumbnails", url: "Thumbnails/{itemListID}", defaults: new { controller = "Results", action = "GetThumbnailImage" });

Answer 3

Lo siguiente funcionará:

<img src="data:image/jpg;base64,@(Convert.ToBase64String(item.PhotoImage))" alt="@item.orientation" />

en mi aplicación, definí el modelo en la página RAZOR como un elemento, en lugar de un modelo. La FotoImage es mi matriz de bytes (en realidad, campo de imagen en SQL) y la Orientación es solo una columna de cadena que cuenta los metadatos sobre la foto.

Busqué durante mucho tiempo antes de encontrar esta respuesta y funcionó para mí. Espero eso ayude.

Answer 4

Model.Content es una imagen de byte [].

@{
    string imageBase64 = Convert.ToBase64String(Model.Content);
    string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
}

Usado así:

<img src="@imageSrc" alt="@Model.Name" width="100" height="100" />

Answer 5

No creo que tener una matriz de bytes en tu Vista te ayude. Tendrá que usar una acción de controlador como img src como se describe en su respuesta vinculada .

[Authorize]
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Image(int id)
{
    byte[] byteArray = _imageRepository.GetImage(id);
    return new FileContentResult(byteArray, "image/jpeg");
}


<img src="Image/1234" alt="Image 1234"/>

Answer 6

Si no le importa usar Session, puede poner su modelo en Session (¡herejía!), Luego renderizar su vista como normal, pero ahora, donde quiere que aparezcan las imágenes, llama a la acción del controlador con Url.Action pasándole el Id de la imagen que quieres Luego retire su modelo de la sesión, encuentre la imagen en su modelo para esa identificación, realice FiLeContentResult (array, imgtype) en su matriz de bytes y viola - imágenes directamente desde su modelo a su página. No es necesario volver a la base de datos real, PERO si usa Session SQL State, entonces obv. estarás llegando a la base de datos mucho peor que antes, pero si eres InProc ... bueno, es una forma de hacerlo. No estoy seguro de si IE9 todavía tiene un pequeño problema con el almacenamiento en caché, pero siempre puedes pasar una identificación única junto con tu identificación real para asegurarte de que eso no ocurra. Es una solución en mal estado, pero funciona.

Answer 7

Simplemente puede hacer un Response.Write (su matriz de bytes) y establecer el Response.ContentType en image / jpeg en su acción Controller. Eso lo mostrará directamente como una imagen.

ACTUALIZAR

El código podría verse más o menos así:

    [Authorize]
    [AcceptVerbs(HttpVerbs.Get)]
    public void GetImage(int id)
    {
        byte[] imageArray = GetImageBytesFromDb(id); // some method for returning the byte-array from db.
        Response.ContentType = "image/png";
        Response.Write(imageArray);       
    }

Ahora usted podría hacer lo siguiente en su vista:

 <img src="@Url.Action("GetImage", "SearchResults", new { id= Model.dsResults.Tables[0].Rows[i]["Id (or whatever the id of the row is)"] })" alt="Product Image" />

Entonces, en otras palabras, en lugar de usar los bytes directamente en la vista, se llama a una acción de controlador que devuelve los bytes de la fila de la base de datos en función del ID de la fila (o producto, si esa es la entidad de la fila)

Puede que no sea exactamente una respuesta a su pregunta, pero funcionará.