C# 在asp.net mvc中显示图像
我正在尝试创建一个网站来上传/显示图像(使用MVC4)。 我编写了以下代码来获取本地存储在服务器上App_Data\images文件夹下的图像。 图像的路径存储在模型的ImageFile属性中 视图呈现各种图像的ID和标题,但图像未加载。 图像文件存在于针对ImageFile属性存储的路径中。 我怎样才能解决这个问题 //模型C# 在asp.net mvc中显示图像,c#,asp.net-mvc-4,C#,Asp.net Mvc 4,我正在尝试创建一个网站来上传/显示图像(使用MVC4)。 我编写了以下代码来获取本地存储在服务器上App_Data\images文件夹下的图像。 图像的路径存储在模型的ImageFile属性中 视图呈现各种图像的ID和标题,但图像未加载。 图像文件存在于针对ImageFile属性存储的路径中。 我怎样才能解决这个问题 //模型 public class Photo { public int ID { get; set; } public string ImageFile { g
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; }
}
//控制器
private PhotoDBContext db = new PhotoDBContext();
public ActionResult Index()
{
return View(db.Photos.ToList());
}
//看法
@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>
@model IEnumerable
@foreach(模型中的var项目){
@DisplayFor(modelItem=>item.Caption)
}
此外,如果将图像保存为字节数组(而不是物理存储文件并使用文件路径),如何重新创建图像并在视图中显示它。i、 e.在视图中迭代模型时,如何从字节数组重新创建图像
编辑
我已经能够通过执行以下操作解决显示问题(两者都是必需的)-
1) 将路径更改为相对路径
2) 将图像移动到App_数据以外的单独文件夹。(发现)
谢谢。请确保图像是相对路径,例如:
@Url.Content("~/Content/images/myimage.png")
MVC4
即使在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;
}
}
}
在视图中,我将照片的ID添加到处理程序的查询字符串中。Hi。在浏览器中单击鼠标右键,然后查找渲染源。您将看到正在渲染的路径。请检查这是否正确。您可能需要遵循下面@Gabe的建议,并确保使用了正确的路径类型。@KingCronus-Hi。是的,我确实通过查看页面的源代码来检查路径。它类似于-D:\TestProjects\MyPhotoLibrary\MyPhotoLibrary\App\u Data\Images\Jellyfish.jpg。图像存在。很可能是您的问题。浏览器无法访问该地址。将其更改为与应用程序根相关的内容。为什么图像属性是字节数组,而不是指向存储在磁盘上的图像的相对路径的指针?@senfo-我将路径存储在ImageFile属性中(文件也保存在服务器本地)并且创建了字节数组来存储数据库中的图像。在保存图像的路径时,我使用以下命令:photo.ImageFile=path.Combine(Server.MapPath(“~/App_Data/Images”)、path.GetFileName(image.FileName));如何更改ImageFile属性以获得相对路径?实际上,在MVC4(更具体地说是Razor2)中,您不需要
Url.Content
,您可以执行
string base64String = Convert.ToBase64String(imageBytes);
<img src="@String.Format("data:image/png;base64,{0}", base64string)" />
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;
}
}
}