在 asp.net mvc 中显示图像答案

【问题标题】：Display images in asp.net mvc在 asp.net mvc 中显示图像
【发布时间】：2013-05-30 15:25:54
【问题描述】：

我正在尝试创建一个网站来上传/显示图像（使用 MVC4）。我编写了以下代码来获取本地存储在服务器上文件夹 App_Data\Images 下的图像。图像的路径存储在模型的 ImageFile 属性中。

视图呈现了各种图像的 ID、标题但图像未加载。图像文件存在于针对 ImageFile 属性存储的路径中。我该如何解决这个问题？

//型号

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>

另外，如果我将图像保存为字节数组（而不是物理存储文件并使用文件路径），我如何重新创建图像并将其显示在视图中。即如何在迭代视图中的模型时从字节数组重新创建图像？

编辑

我已经能够通过执行以下操作来解决显示问题（两者都需要）- 1）将路径更改为相对路径 2) 将图像移动到 App_Data 以外的单独文件夹。（找到this）

谢谢。

【问题讨论】：

嗨。在浏览器中右键单击并找到渲染的源。您将看到正在渲染的路径。请检查这是否正确。您可能需要遵循以下@Gabe 的建议，并确保您使用了正确的路径类型。
@KingCronus - 嗨。是的，我确实通过查看页面的源来检查路径。它就像 - D:\TestProjects\MyPhotoLibrary\MyPhotoLibrary\App_Data\Images\Jellyfish.jpg。图像存在那里。
很可能是你的问题。浏览器无法访问该地址。将其更改为相对于应用程序根目录的内容。
为什么你的图像属性是字节数组而不是指向图像在磁盘上存储位置的相对路径的指针？
@senfo - 我将路径存储在 ImageFile 属性中（文件也保存在本地服务器上），并创建了字节数组以将图像存储在数据库中。

标签： c# asp.net-mvc-4

【解决方案1】：

确保您的图像是相对路径，例如：

@Url.Content("~/Content/images/myimage.png")

MVC4

<img src="~/Content/images/myimage.png" />

您可以即时将byte[] 转换为Base64 string。

string base64String = Convert.ToBase64String(imageBytes);

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

【讨论】：

在保存图像的路径时我使用这个： photo.ImageFile = Path.Combine(Server.MapPath("~/App_Data/Images"), Path.GetFileName(image.FileName));如何将 ImageFile 属性更改为具有相对路径？
其实在MVC 4（更具体地说是Razor 2）中，你不需要Url.Content，你可以做<img src="~/Content/images/myimage.png" />

【解决方案2】：

即使在 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 添加到处理程序的查询字符串中。

【讨论】：