Загрузка и отображение изображения в ASP.NET MVC

Question

Мне трудно загрузить изображение и затем отобразить его в моем представлении.Я просмотрел здесь много постов, и по какой-то причине у меня ничего не получалось.

Изображение загружается (в моем случае оно сохраняется в ~/Content/Images, но не отображается в представлении. Весь проект публикуется в Azure.

Пожалуйста, абстрагируйтесь от таких вещей, как проверка загруженного файлана самом деле картинка или обработка размера картинки.

Моя модель домена:

public class Product
{
    ...
    public string ProductImageUrl { get; set; }
    ...
}

Контроллер - метод публикации:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(/*[Bind(Include = "ProductId,ProductName,ProductDescription,ProductPrice, CategoryId, Quantity, picture")]*/ Product product, HttpPostedFileBase picture)
{
   if (ModelState.IsValid)
   {
        db.Products.Add(product);

        if (picture != null)
        {
             var originalFileName = Path.GetFileName(picture.FileName);
             string fileId = Guid.NewGuid().ToString().Replace("-", "");
             var path = Path.Combine(Server.MapPath("~/Content/Images/"), fileId + ".jpg");

             picture.SaveAs(path);

             product.ProductImageUrl = path;
             product.ProductImageName = fileId;

             db.SaveChanges();
        }

        db.SaveChanges();

        return RedirectToAction("Index");
     }

     return View(product);
} 

На мой взгляд:

       @foreach (var item in Model)
        {
            <tr>
                <td>
                    <img src="@item.ProductImageUrl" />
                </td>
...

Answer 1

Проблема в том, что вы храните абсолютный путь в поле ProductImageUrl, и поэтому он не работает в вашей хостинговой среде.Что еще более важно вам не нужны оба ProductImageUrl и ProductImageName для обработки изображений.Используйте только ProductImageName.

Выполните следующие действия:

Ваша модель Product должна выглядеть следующим образом:

public class Product
{
    ...
    public string ProductImageName { get; set; }
    ...
}

Затем в методе Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Product product, HttpPostedFileBase productImage)
{
   if (ModelState.IsValid)
   {
      if (productImage != null && productImage.ContentLength > 0)
      {
          var fileName = Guid.NewGuid().ToString().Replace("-", "") + "_" + Path.GetFileName(productImage.FileName);
          var path = Path.Combine(Server.MapPath("~/Content/Images/Product/"), fileName);

          productImage.SaveAs(path);
          product.ProductImageName = fileName;
      }

      db.Products.Add(product);
      await db.SaveChangesAsync();
      return RedirectToAction("Index");
   }

   return View(product);
} 

Тогда в View так:

@foreach (var item in Model)
{
   <tr>
       <td>
           <img src="@Url.Content("~/Content/Images/Product/"+@item.ProductImageName)" />
       </td>
   <tr>
}

Надеюсь, это сработает для вас!Спасибо.

Answer 2

Поправьте меня, если я ошибаюсь, но строка, хранящаяся в item.ProductImageUrl, похожа на c:\\.., верно?

Server.MapPath указывает относительное расположение жесткого диска на сервере.Если вы поместите это местоположение в src , то вы просите браузер найти этот файл на вашем LOCAL жестком диске.

Попробуйте item.ProductImageUrl = "<url to your site>/Content/Images/" + fileId + ".jpg";.

Answer 3

Я бы добавил тег <base> к вашему виду, чтобы все ссылки относились к вашему сайту.Тогда вам вообще не нужно строить путь к изображению.

Например, если ваш сайт имеет значение https://bestsiteever.com, ваш тег будет выглядеть так:

<base href="https://bestsiteever.com" >

и ваш путь будет:

$"/Content/Images/{fieldId}.jpg"

Answer 4

Если вы публикуете свое изображение в виде байтового массива, вы должны иметь возможность преобразовать его в формат Base64 и отобразить его в виде:

<img src="data:image;base64,@Convert.ToBase64String(item.ProductImageUrl)" />

Стоит сделать снимок.