web-dev-qa-db-fra.com

Afficher une image contenue dans un octet [] avec ASP.Net MVC3

J'ai une vue avec un type fort. Ce type fort a un champ constitué d'un octet [], ce tableau contient une image.

Est-il possible d'afficher cette image avec quelque chose comme @ Html.Image (Model.myImage)?

Merci beaucoup

c#asp.net-mvcasp.net-mvc-3razorstrong-typing
20
J4N

Vous pouvez créer une méthode d'action du contrôleur qui renvoie une image en tant que FileContentResult:

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

Vous pouvez ensuite créer un ActionLink pour la méthode d'action dans la vue à l'aide de l'ID d'image du modèle.

17
Dmitry S.

Cela dépend de la taille de l'image. S'il est petit, vous pouvez écrire quelque chose en base 64 et l'encoder dans le code HTML, comme n'importe lequel de ces derniers .

Pour un exemple concret d'ici :

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

Si l’image a une taille appréciable, vous voudrez peut-être plutôt écrire un itinéraire permettant une recherche par une touche de l’image, c’est-à-dire un itinéraire comme /images/{id} - dans cet itinéraire, vous extrayez l’image binaire et utilisez return File(bytes, contentType) , en plus définir les en-têtes de mise en cache (et n'oubliez pas de revérifier la sécurité nécessaire). Dans votre html vous auriez juste un

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

(en utilisant la syntaxe de rasoir, mais similaire pour aspx).

L'approche de routage distinct nécessite un saut supplémentaire sur le serveur, mais permet la mise en cache sur le client (l'approche inline base 64 place les données sur chaque requête).

8
Marc Gravell

Si vous avez déjà chargé l'image dans votre modèle sous la forme d'un tableau byte[], vous pouvez le faire en tant que @Marc Gravell mentionne dans sa réponse:

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

Cela simplifie grandement le processus et vous n'aurez pas besoin d'une méthode d'action FileContentResult spécifique ni de frapper à nouveau la base de données (voir @Dmitry S answer ) simplement pour extraire ce tableau byte[] avec votre image/photo puisque vous avez déjà il a chargé dans votre modèle.

7
Leniel Maccaferri

On dirait que vous auriez besoin d'une nouvelle action qui récupère le tableau d'octets (d'une base de données?) Et renvoie l'image via la méthode Fichier ....

Générez ensuite une ancre qui pointe vers cette action afin que l’image puisse être chargée pendant le chargement de la page, accélérant ainsi l’affichage.

4
Kieron

Regardez la classe WebImage.

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

1
Elan Hasson

Je concevrais un gestionnaire générique simple pour servir vos images. Ce gestionnaire pourrait, en fonction de certains paramètres, charger des images de la base de données et les écrire dans le flux de sortie 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
DEHAAS