ASP.Net MVC : Comment afficher une image de type byte array à partir d'un modèle ?

Question

J'ai un modèle avec un fichier image de type byte array que je veux afficher sur la page.

Comment puis-je faire cela sans revenir à la base de données ?

Toutes les solutions que je vois utilisent un ActionResult de retourner à la base de données pour récupérer l'image, mais j'ai déjà l'image sur le modèle...

Answer 1

Quelque chose comme ça pourrait marcher...

@{
    var base64 = Convert.ToBase64String(Model.ByteArray);
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}

<img src="@imgSrc" />

Comme mentionné dans les commentaires ci-dessous, veuillez utiliser les armes ci-dessus en sachant que Bien que cela puisse répondre à votre question, cela ne résoudra peut-être pas votre problème. . En fonction de votre problème, cela peut être la solution, mais je n'exclurais pas complètement la possibilité d'accéder deux fois à la base de données.

Answer 2

Cela a fonctionné pour moi

<img src="data:image;base64,@System.Convert.ToBase64String(Model.CategoryPicture.Content)" width="80" height="80"/>

Answer 3

Je recommande quelque chose de ce genre, même si l'image vit à l'intérieur de votre modèle.

Je me rends compte que vous demandez un moyen direct d'y accéder depuis la vue et beaucoup d'autres ont répondu à cette question et vous ont dit ce qui n'allait pas avec cette approche. C'est donc une autre façon de charger l'image de manière asynchrone pour vous et je pense que c'est une meilleure approche.

Modèle d'échantillon :

[Bind(Exclude = "ID")]
public class Item
{
    [Key]
    [ScaffoldColumn(false)]
    public int ID { get; set; }

    public String Name { get; set; }

    public byte[] InternalImage { get; set; } //Stored as byte array in the database.
}

Méthode d'échantillonnage dans le contrôleur :

public async Task<ActionResult> RenderImage(int id)
{
    Item item = await db.Items.FindAsync(id);

    byte[] photoBack = item.InternalImage;

    return File(photoBack, "image/png");
}

Voir

@model YourNameSpace.Models.Item

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
<h4>Item</h4>
<hr />
<dl class="dl-horizontal">
    <img src="@Url.Action("RenderImage", new { id = Model.ID})" />
</dl>
<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.Name)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Name)
    </dd>
</dl>
</div>

Answer 4

Une façon de procéder est d'ajouter ceci à une nouvelle classe c# ou à une classe HtmlExtensions

public static class HtmlExtensions
{
    public static MvcHtmlString Image(this HtmlHelper html, byte[] image)
    {
        var img = String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(image));
        return new MvcHtmlString("<img src='" + img + "' />");
    }
}

alors vous pouvez le faire dans n'importe quelle vue

@Html.Image(Model.ImgBytes)

Answer 5

Si vous pouvez coder vos octets en base-64, vous pouvez essayer d'utiliser le résultat comme source d'image. Dans votre modèle, vous pourriez ajouter quelque chose comme :

public string ImageSource
{
    get
    {
        string mimeType = /* Get mime type somehow (e.g. "image/png") */;
        string base64 = Convert.ToBase64String(yourImageBytes);
        return string.Format("data:{0};base64,{1}", mimeType, base64);
    }
}

Et à votre avis :

<img ... src="@Model.ImageSource" />