Pertanyaan MVC Cara menampilkan gambar array byte dari model


Saya sudah model dengan file gambar array byte yang ingin saya tampilkan di halaman.

Bagaimana saya bisa melakukannya tanpa kembali ke Database?

Semua solusi yang saya lihat menggunakan ActionResult untuk kembali ke database untuk mengambil gambar, tetapi saya sudah memiliki gambar pada model ...


75
2017-07-30 16:30


asal


Jawaban:


Sesuatu seperti ini mungkin berhasil ...

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

<img src="@imgSrc" />

Seperti yang disebutkan dalam komentar di bawah ini, silakan gunakan yang dipersenjatai di atas dengan pengetahuan itu meskipun ini mungkin menjawab pertanyaan Anda, itu mungkin tidak menyelesaikan masalah Anda. Tergantung pada masalah Anda, ini mungkin solusinya tetapi saya tidak akan benar-benar mengesampingkan mengakses database dua kali.


152
2017-07-30 16:39



Ini berhasil bagi saya

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

25
2017-10-10 21:50



Saya merekomendasikan sesuatu di sepanjang garis ini, bahkan jika gambar tinggal di dalam model Anda.

Saya menyadari Anda meminta cara langsung untuk mengaksesnya langsung dari tampilan dan banyak orang lain yang telah menjawabnya dan memberi tahu Anda apa yang salah dengan pendekatan itu jadi ini hanyalah cara lain yang akan memuat gambar dalam mode asinkron untuk Anda dan saya pikir adalah pendekatan yang lebih baik.

Model sampel:

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

Contoh Metode di Controller:

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

    byte[] photoBack = item.InternalImage;

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

Melihat

@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



Salah satu caranya adalah menambahkan ini ke kelas c # atau kelas HtmlExtensions baru

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

maka Anda dapat melakukan ini dalam tampilan apa pun

@Html.Image(Model.ImgBytes)

10
2018-06-06 12:54



Jika Anda dapat mendasarkan-64 menyandikan byte Anda, Anda bisa mencoba menggunakan hasilnya sebagai sumber gambar Anda. Dalam model Anda, Anda dapat menambahkan sesuatu seperti:

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

Dan dalam pandangan Anda:

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

8
2017-07-30 16:40



Jika gambarnya tidak terlalu besar, dan jika ada kemungkinan Anda akan sering menggunakan ulang gambar, dan jika Anda tidak memiliki terlalu banyak gambar, dan jika gambarnya tidak rahasia (artinya tidak besar berurusan jika satu pengguna berpotensi melihat gambar orang lain) ...

Banyak dari "jika" ada di sini, jadi ada peluang bagus ini adalah ide yang buruk:

Anda dapat menyimpan byte gambar dalam Cache untuk waktu yang singkat, dan buatlah tag gambar menunjuk ke arah metode tindakan, yang pada gilirannya membaca dari cache dan memuntahkan gambar Anda. Ini akan memungkinkan browser meng-cache gambar dengan tepat.

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

Ini memiliki manfaat tambahan (atau apakah kruk?) Bekerja di browser lama, di mana gambar sebaris tidak berfungsi di IE7 (atau IE8 jika lebih besar dari 32kB).


5
2017-07-30 17:01



Anda harus memiliki byte [] di DB Anda.

  Byte saya [] ada pada objek Person saya:

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


Anda perlu mengonversi byte Anda [] dalam String. Jadi, saya ada di controller saya:

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


  Selanjutnya, dalam file .cshtml saya, Model saya adalah ViewModel. Ini yang saya miliki di:

 public String Image { get; set; }


Saya menggunakannya seperti ini di file .cshtml saya:

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

"data: gambar /ekstensi file gambar; base64, {0}, String gambar Anda"

Saya berharap ini akan membantu seseorang!


1
2017-09-19 09:52



Jika Anda ingin menyajikan gambar, tambahkan metode sebagai kelas pembantu atau ke model itu sendiri dan biarkan metode untuk mengonversi gambar larik byte ke format gambar seperti PNG atau JPG lalu ubah ke string Base64. Setelah Anda memilikinya, ikat nilai base64 pada tampilan Anda dalam format

"data: gambar /[ekstensi jenis file gambar]; base64,[string base64 Anda ada di sini]"

Di atas ditugaskan ke img tag src atribut.

Satu-satunya masalah yang saya miliki dengan ini adalah string base64 yang terlalu panjang. Jadi, saya tidak akan merekomendasikannya untuk beberapa model yang ditampilkan dalam tampilan.


0
2017-07-30 16:42



Ini adalah versi modifikasi dari jawaban Manoj yang saya gunakan pada sebuah proyek. Baru saja diperbarui untuk mengambil kelas, atribut html dan menggunakan TagBuilder.

    public static IHtmlString Image(this HtmlHelper helper, byte[] image, string imgclass, 
                                     object htmlAttributes = null)
    {
        var builder = new TagBuilder("img");
        builder.MergeAttribute("class", imgclass);
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        var imageString = image != null ? Convert.ToBase64String(image) : "";
        var img = string.Format("data:image/jpg;base64,{0}", imageString);
        builder.MergeAttribute("src", img);

        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }

Yang dapat digunakan kemudian sebagai berikut:

    @Html.Image(Model.Image, "img-cls", new { width="200", height="200" })

0
2018-06-27 09:56



Saya telah membuat metode penolong yang didasarkan pada asnwer di bawah dan saya sangat senang bahwa penolong ini dapat membantu sebanyak mungkin.

Dengan model:

 public class Images
 {
    [Key]
    public int ImagesId { get; set; }
    [DisplayName("Image")]
    public Byte[] Pic1 { get; set; }
  }

Helpernya adalah:

public static IHtmlString GetBytes<TModel, TValue>(this HtmlHelper<TModel> helper, System.Linq.Expressions.Expression<Func<TModel, TValue>> expression, byte[] array, string Id)
    {
        TagBuilder tb = new TagBuilder("img");
        tb.MergeAttribute("id", Id);
        var base64 = Convert.ToBase64String(array);
        var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
        tb.MergeAttribute("src", imgSrc);
        return MvcHtmlString.Create(tb.ToString(TagRenderMode.SelfClosing));
    }

Tampilan menerima objek: ICollection sehingga Anda perlu menggunakannya dalam tampilan dalam pernyataan foreach:

 @foreach (var item in Model)
  @Html.GetBytes(itemP1 => item.Pic1, item.Graphics, "Idtag")
}

0
2017-10-07 00:51