我有一个带有字节数组图像文件的模型,我想在页面上显示它。如何做到在不返回数据库的情况下实现?所有我看到的解决方案都使用一个
ActionResult
返回数据库来检索图像,但我已经在模型中有了图像...ActionResult
返回数据库来检索图像,但我已经在模型中有了图像...这样的东西可能会有用...
@{
var base64 = Convert.ToBase64String(Model.ByteArray);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}
<img src="@imgSrc" />
如下方评论所述,请使用上述方法,并注意虽然这可能回答了你的问题,但可能无法解决你的问题。根据你的问题,这可能是解决方案,但我不会完全排除两次访问数据库的可能性。
这对我起作用了
<img src="data:image;base64,@System.Convert.ToBase64String(Model.CategoryPicture.Content)" width="80" height="80"/>
我建议采取类似的方法,即使图像是在模型内部。
我知道你想要直接从视图中访问它,而且很多人已经回答了这个问题,并告诉你那种方法的问题,所以这只是另一种方法,可以异步加载图像,并且我认为这是更好的方法。
样例模型:
[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>
其中一种方法是将此内容添加到新的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)
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" />
你需要在数据库中有一个byte[]。
我的byte[]存储在Person对象中:
public class Person
{
public byte[] Image { get; set; }
}
String img = Convert.ToBase64String(person.Image);
public String Image { get; set; }
<img src="@String.Format("data:image/jpg;base64,{0}", Model.Image)" />
"数据:image/图像文件扩展名;base64,{0}, 你的图片字符串"
希望能对某人有所帮助!
// 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(或大于32kB的IE8)中无法工作。
这是我在项目中使用的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" })
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));
}
@foreach (var item in Model)
@Html.GetBytes(itemP1 => item.Pic1, item.Graphics, "Idtag")
}