Загрузка и отображение изображения в ASP.NET MVC
Мне сложно загрузить изображение, а затем отобразить его в моем представлении. Я просмотрел много сообщений здесь, и по какой-то причине у меня ничего не работает.
Изображение загружается (в моем случае сохраняется в ~/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>
...
Я пробовал это, но это не сработало
Можете ли вы проверить запрос этого изображения на вкладке сети в инструментах разработчика. Это, скорее всего, скажет вам, почему он не отображается.
@xcelm Что такое сгенерированная строка item.ProductImageUrl?
@Valkyrie - product.ProductImageUrl = путь;
Ответы 4
Если вы разместите свое изображение как массив байтов, вы сможете преобразовать его в формат Base64 и отобразить в представлении:
<img src = "data:image;base64,@Convert.ToBase64String(item.ProductImageUrl)" />
Стоит попробовать.
Поправьте меня, если я ошибаюсь, но строка, хранящаяся в item.ProductImageUrl, - это путь, подобный c:\\.., верно?
Server.MapPath указывает относительное расположение жесткого диска на сервере. Если вы поместите это местоположение в src, тогда вы просите браузер найти этот файл на вашем жестком диске МЕСТНЫЙ.
Попробуйте item.ProductImageUrl = "<url to your site>/Content/Images/" + fileId + ".jpg";.
Я бы добавил к вашему просмотру тег <base>, чтобы все ссылки относились к вашему сайту. Тогда вам вообще не нужно строить путь к изображению.
Например, если ваш сайт находится на https://bestsiteever.com, ваш тег будет выглядеть так:
<base href = "https://bestsiteever.com" >
и ваш путь будет:
$"/Content/Images/{fieldId}.jpg"
Проблема в том, что вы сохраняете абсолютный путь в поле ProductImageUrl, и поэтому он не работает в вашей среде хостинга. Что еще более важно, вам не нужны одновременно ProductImageUrl и ProductImageName для обработки изображений. Используйте только ProductImageName.
Сделайте следующее:
Ваша модель Product должна иметь следующее:
public class Product
{
...
public string ProductImageName { get; set; }
...
}
Затем в методе контроллера:
[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/"[email protected])" />
</td>
<tr>
}
Надеюсь, это сработает для вас! Спасибо.
Приятно видеть, что он решил вашу проблему! Добро пожаловать!
вам необходимо указать тип изображения, например .jpg или .png, в имени файла с помощью guid и сохранить его, как и в ProductImageUrl