Просмотр изображений в asp.net mvc

Я пытаюсь создать сайт для загрузки/отображения изображений (используя MVC4). Я написал приведенный ниже код для получения изображений, которые локально хранятся на сервере под папкой App_Data\Images. Путь к изображению сохраняется в свойстве ImageFile модели.

Вид отображает идентификатор, Подпись различных изображений, но изображение не загружается. Файл образа существует в пути, хранящемся по отношению к свойству 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; } 
}

//контроллер

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)

Спасибо.

Ответ 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)" />

Ответ 2

Для этого можно использовать обработчик, даже в MVC4. Вот пример из одного i, сделанного ранее:

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;
        }
    }
}

В представлении я добавил идентификатор фотографии в строку запроса обработчика.