Frage MVC So zeigen Sie ein Byte-Array-Bild vom Modell an


Ich habe ein Modell mit einer Byte-Array-Bilddatei, die ich auf der Seite anzeigen möchte.

Wie kann ich das tun, ohne zurück zur Datenbank zu gehen?

Alle Lösungen, die ich sehe, verwenden ein ActionResult, um zurück in die Datenbank zu gehen, um das Bild zu erhalten, aber ich habe bereits das Bild auf dem Modell ...


75
2017-07-30 16:30


Ursprung


Antworten:


So etwas mag funktionieren ...

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

<img src="@imgSrc" />

Wie in den Kommentaren unten erwähnt, verwenden Sie bitte das oben genannte mit dem Wissen, dass Obwohl dies Ihre Frage beantworten kann, kann es Ihr Problem nicht lösen. Abhängig von Ihrem Problem könnte dies die Lösung sein, aber ich würde den Zugriff auf die Datenbank nicht vollständig ausschließen.


152
2017-07-30 16:39



Das hat für mich funktioniert

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

25
2017-10-10 21:50



Ich empfehle etwas in dieser Richtung, auch wenn das Bild in Ihrem Modell lebt.

Ich weiß, dass du direkt aus der Sicht einen direkten Weg suchst, um darauf zuzugreifen, und viele andere haben das beantwortet und dir gesagt, was mit diesem Ansatz falsch ist, also ist dies nur ein weiterer Weg, das Bild für dich und mich asynchron zu laden denke, ist ein besserer Ansatz.

Beispielmodell:

[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.
}

Beispielmethode im Controller:

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

    byte[] photoBack = item.InternalImage;

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

Aussicht

@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>

18
2018-06-03 20:25



Eine Möglichkeit besteht darin, dies einer neuen c # -Klasse oder HtmlExtensions-Klasse hinzuzufügen

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 + "' />");
    }
}

dann können Sie das in jeder Hinsicht tun

@Html.Image(Model.ImgBytes)

10
2018-06-06 12:54



Wenn Sie Ihre Bytes codieren können, könnten Sie versuchen, das Ergebnis als Bildquelle zu verwenden. In Ihrem Modell können Sie etwas hinzufügen wie:

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);
    }
}

Und Ihrer Meinung nach:

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

8
2017-07-30 16:40



Wenn das Bild nicht so groß ist, und wenn es eine gute Chance gibt, werden Sie das Bild oft wiederverwenden, und wenn Sie nicht zu viele davon haben, und wenn die Bilder nicht geheim sind (was bedeutet, dass es nicht groß ist) Deal, wenn ein Benutzer das Bild einer anderen Person sehen könnte) ...

Viele "If" s hier, also ist es eine gute Chance, das ist eine schlechte Idee:

Sie können die Bildbytes speichern Cache für eine kurze Zeit, und ein Image-Tag auf eine Aktionsmethode gerichtet, die wiederum liest aus dem Cache und spuckt Ihr Bild aus. Dadurch kann der Browser das Bild entsprechend zwischenspeichern.

// In your original controller action
HttpContext.Cache.Add("image-" + model.Id, model.ImageBytes, null,
    Cache.NoAbsoluteExpiration, TimeSpan.FromMinutes(1),
    CacheItemPriority.Normal, null);

// In your view:
<img src="@Url.Action("GetImage", "MyControllerName", new{fooId = Model.Id})">

// In your controller:
[OutputCache(VaryByParam = "fooId", Duration = 60)]
public ActionResult GetImage(int fooId) {
    // Make sure you check for null as appropriate, re-pull from DB, etc.
    return File((byte[])HttpContext.Cache["image-" + fooId], "image/gif");
}

Dies hat den zusätzlichen Vorteil (oder ist es eine Krücke?), In älteren Browsern zu arbeiten, wo die Inline-Images nicht in IE7 funktionieren (oder IE8, wenn sie größer als 32kB sind).


5
2017-07-30 17:01



Sie müssen ein Byte [] in Ihrem DB haben.

  Mein Byte [] befindet sich in meinem Person-Objekt:

public class Person
{
    public byte[] Image { get; set; }
}


Sie müssen Ihr Byte [] in einem String konvertieren. Also, ich habe in meinem Controller:

String img = Convert.ToBase64String(person.Image);


  Als Nächstes ist mein Model in meiner .cshtml-Datei ein ViewModel. Das ist was ich habe in:

 public String Image { get; set; }


Ich benutze es so in meiner .cshtml Datei:

<img src="@String.Format("data:image/jpg;base64,{0}", Model.Image)" />

"Daten: Bild /Bilddateierweiterung; base64, {0}, Dein Bild String"

Ich wünschte, es würde jemandem helfen!


1
2017-09-19 09:52