C# 在asp.net mvc中显示图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16840093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display images in asp.net mvc
提问by siddharth
I am trying to create a website to upload/display images (using MVC4). I have written the below code to fetch the images which are locally stored on the server under a folder App_Data\Images. The path for the image is stored in the ImageFile property of the model.
我正在尝试创建一个网站来上传/显示图像（使用 MVC4）。我编写了以下代码来获取本地存储在服务器上 App_Data\Images 文件夹下的图像。图像的路径存储在模型的 ImageFile 属性中。
The view renders the ID, Caption of the various images but the image is not loaded. The image file exists in the path stored against the ImageFile property. How can I fix this?
视图呈现各种图像的 ID、标题，但图像未加载。图像文件存在于针对 ImageFile 属性存储的路径中。我怎样才能解决这个问题？
//Model
//模型
public class Photo
{
public int ID { get; set; }
public string ImageFile { get; set; } //This contains a path where the image is locally stored on the server
public string Caption { get; set; }
byte[] Image { get; set; }
}
//Controller
//控制器
private PhotoDBContext db = new PhotoDBContext();
public ActionResult Index()
{
return View(db.Photos.ToList());
}
//View
//看法
@model IEnumerable<MyPhotoLibrary.Models.Photo>
<table>
@foreach (var item in Model) {
<tr>
<td>
<img src="@Url.Content(item.ImageFile)" alt="" />
</td>
<td>
@Html.DisplayFor(modelItem => item.Caption)
</td>
</tr>
}
</table>
Also, if I save the image as a byte array (instead of physically storing the file and using the file path), how can I re-create the image and display it in the view . i.e. how do I re-create the image from the byte array while iterating over the model in the view?
此外，如果我将图像保存为字节数组（而不是物理存储文件并使用文件路径），我如何重新创建图像并将其显示在视图中。即如何在迭代视图中的模型时从字节数组重新创建图像？
EDIT
编辑
I have been able to resolve the display problem by doing the below (both are needed) - 1) Changed the path to a relative path 2) Moved the images to a separate folder other than App_Data. (found this)
我已经能够通过执行以下操作来解决显示问题（两者都需要） - 1) 将路径更改为相对路径 2) 将图像移动到 App_Data 以外的单独文件夹。（找到这个）
Thanks.
谢谢。
采纳答案by Gabe
Make sure you image is a relative path such as:
确保您的图像是相对路径，例如：
@Url.Content("~/Content/images/myimage.png")
MVC4
MVC4
<img src="~/Content/images/myimage.png" />
You could convert the byte[]into a Base64stringon the fly.
您可以即时将其转换byte[]为 a Base64string。
string base64String = Convert.ToBase64String(imageBytes);
<img src="@String.Format("data:image/png;base64,{0}", base64string)" />
回答by anthr
It is possible to use a handler to do this, even in MVC4. Here's an example from one i made earlier:
即使在 MVC4 中，也可以使用处理程序来执行此操作。这是我之前制作的一个示例：
public class ImageHandler : IHttpHandler
{
byte[] bytes;
public void ProcessRequest(HttpContext context)
{
int param;
if (int.TryParse(context.Request.QueryString["id"], out param))
{
using (var db = new MusicLibContext())
{
if (param == -1)
{
bytes = File.ReadAllBytes(HttpContext.Current.Server.MapPath("~/Images/add.png"));
context.Response.ContentType = "image/png";
}
else
{
var data = (from x in db.Images
where x.ImageID == (short)param
select x).FirstOrDefault();
bytes = data.ImageData;
context.Response.ContentType = "image/" + data.ImageFileType;
}
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.BinaryWrite(bytes);
context.Response.Flush();
context.Response.End();
}
}
else
{
//image not found
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
In the view, i added the ID of the photo to the query string of the handler.
在视图中，我将照片的 ID 添加到处理程序的查询字符串中。
