MVC如何显示从模型的字节数组图像MVC如何显示从模型的字节数组图像(MVC How to disp

我已经与我想在页面上显示的字节数组图像文件的模型。

我如何能做到这一点，而不必返回到数据库？

所有我看到用一个ActionResult回到数据库检索图像，但我已经对模型的图像解决方案...

Answer 1:

像这样的东西可能工作...

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

<img src="@imgSrc" />

正如在下面的评论中提到，请使用与知识虽然这可能会回答你的问题可能无法解决您的问题武装以上。 根据您的问题，这可能是解决方案，但我不会完全排除访问数据库的两倍。

Answer 2:

这为我工作

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

Answer 3:

我建议沿着这些线路的东西，即使图像住你的模型内。

我知道你所要求的一个直接的方式从视图和许多其他的权利访问它已经回答了，告诉你什么是错的方法，使这只是另一种方式，将在异步的方式加载图像为你和我认为这是一个更好的办法。

样品型号：

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

抽样方法在控制器：

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

    byte[] photoBack = item.InternalImage;

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

视图

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

如果你能基于64位编码的字节，你可以尝试使用结果作为图像源。 在你的模型，你可以添加类似：

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

而在你的看法：

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

Answer 5:

一种方法是把它添加到一个新的C＃类或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 + "' />");
    }
}

那么您可以在任何视图做到这一点

@Html.Image(Model.ImgBytes)

Answer 6:

如果图像本来就不大，如果有一个很好的机会，你会被重新使用图像的时候，如果你没有太多的，如果图像是不是秘密的（这意味着它是没有什么大的如果处理一个用户可能会看到另一个人的形象）...

的“如果”在这儿，所以有一个很好的机会，这是一个坏主意的数量：

你可以存储在图像字节Cache的时间很短，并且使图像标签朝着一个操作方法，进而从缓存中读取并吐出你的形象指出。 这将允许浏览器缓存适当的图像。

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

这有额外的好处（或者是一个拐杖？）在旧的浏览器，工作在内嵌图像不IE7（或IE8如果大于32KB大）的工作。

Answer 7:

这是马诺的回答，我在一个项目中使用的修改版本。 刚刚更新，以一类，HTML属性和使用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));
    }

然后可以使用如下：

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

Answer 8:

你需要有一个byte []在你的数据库。

我的byte []是我的Person对象：

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

您需要将您的byte []转换成字符串。 所以，我有我的控制器：

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

接下来，在我的.cshtml文件，我的模型是一个ViewModel。 这是我在：

 public String Image { get; set; }

我在.cshtml文件中使用这样的：

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

“数据：图像/ 图像文件的扩展 ;的base64，{0}， 您的图像串 ”

我希望它会帮助别人！

Answer 9:

如果你想呈现的图像，添加一个方法作为辅助类或模型本身并允许该方法的字节数组图像转换为像PNG或JPG再转换为Base64串的图像格式。 一旦你的，绑定在格式视图中的Base64值

“数据：图像/ [图像文件类型的扩展名]的base64，[您的base64字符串到这里]”

以上是分配给img标签的src属性。

我有这个问题的唯一问题是BASE64字符串太长。 所以，我不会推荐它为视图中被显示多个模型。

Answer 10:

我创建了基于如下asnwer一个辅助方法，我很高兴，这个助手可以帮助尽可能多的。

与模型：

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

助手是：

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

该视图正在接收：ICollection的对象，所以你需要用它在foreach语句中的观点：

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

文章来源: MVC How to display a byte array image from model