130

我有一个模型，其中包含要在页面上显示的字节数组图像文件。

在不返回数据库的情况下如何做到这一点？

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

4

10 回答 10

246

像这样的东西可能会起作用......

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

<img src="@imgSrc" />

正如下面评论中提到的，请使用上面的知识，尽管这可能会回答您的问题，但可能无法解决您的问题。根据您的问题，这可能是解决方案，但我不会完全排除两次访问数据库的可能性。

于 2013-07-30T16:39:40.807 回答
50

这对我有用

<img src="data:image;base64,@System.Convert.ToBase64String(Model.CategoryPicture.Content)" width="80" height="80"/>
于 2013-10-10T21:50:43.890 回答
27

我推荐一些类似的东西，即使图像存在于你的模型中。

我意识到您正在寻求一种直接从视图中访问它的方法，许多其他人已经回答了这个问题并告诉您这种方法有什么问题，所以这只是另一种方式，可以为您和我以异步方式加载图像认为是更好的方法。

样品型号：

[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>
于 2014-06-03T20:25:41.833 回答
15

一种方法是将其添加到新的 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)
于 2014-06-06T12:54:21.453 回答
10

如果您可以对字节进行 base-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" />
于 2013-07-30T16:40:28.873 回答
5

如果图像不是那么大，并且很有可能您会经常重复使用该图像，并且如果您没有太多图像，并且图像不是秘密的（意味着它不大如果一个用户可能会看到另一个人的图像，则处理）...

这里有很多“如果”，所以很有可能这是一个坏主意：

您可以将图像字节存储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）中不起作用。

于 2013-07-30T17:01:12.270 回答
5

您需要在数据库中有一个 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)" />

"data:image/图片文件扩展名;base64,{0}, your image String "

我希望它会帮助别人！

于 2017-09-19T09:52:54.080 回答
3

这是我在项目中使用的 Manoj 答案的修改版本。刚刚更新为采用类、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" })
于 2015-06-27T09:56:55.407 回答
1

如果要显示图像，请添加一个方法作为辅助类或模型本身，并允许该方法将字节数组图像转换为 PNG 或 JPG 等图像格式，然后再转换为 Base64 字符串。一旦你有了它，以格式绑定你的视图上的base64值

"data:image/ [图像文件类型扩展名] ;base64, [你的 base64 字符串放在这里] "

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

我唯一遇到的问题是 base64 字符串太长。因此，我不建议在视图中显示多个模型。

于 2013-07-30T16:42:44.180 回答
0

我在下面的 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")
}
于 2015-10-07T00:51:16.847 回答