Я работаю в технологии aspnet core mvc, Мне удается добавить изображение, оно идет на wwwroot, но изображение плохо отображается в браузере. Пример: введите описание изображения здесь
введите описание изображения здесь
Мой контроллер:
[HttpPost,ActionName("CreateAnimal")]
[ValidateAntiForgeryToken]
public async Task<IActionResult> CreateAnimal([FromForm] CreateAnimalViewModel model)
{
string wwwPath = _Environment.WebRootPath;
string contentPath = _Environment.ContentRootPath;
ModelState.Clear();
model.Animal!.Category = _context.Categories.Where(c => c.CategoryId == model.Animal.CategoryId).FirstOrDefault()!;
var path = Path.Combine(wwwPath, "Images", model.Photo!.FileName);
if (model.Photo.Length > 0)
{
using var stream = new FileStream(path, FileMode.Create);
await model.Photo.CopyToAsync(stream);
}
model.Animal.PhotoUrl = path;
_context.Add(model.Animal);
if (TryValidateModel(model))
{
_context.Add(model.Animal!);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Manager));
}
ViewBag.CategoryId = new SelectList(_context.Categories, "CategoryId", "Name");
return View();
}
Мой взгляд:
@model IEnumerable<PetShop.Data.Models.Animal>
<table id = "Table">
<thead>
<tr>
<th>@Html.DisplayNameFor(model => model.PhotoUrl)</th>
<th>@Html.DisplayNameFor(model => model.Name)</th>
<th>@Html.DisplayNameFor(model => model.BirthDate)</th>
<th>@Html.DisplayNameFor(model => model.Description)</th>
<th>@Html.DisplayNameFor(model => model.Category.Name)</th>
<th>@Html.DisplayNameFor(model => model.Category)</th>
<th>Edit Animel</th>
<th>Delete Animel</th>
@foreach (элемент var в модели!) {
<img class = "Images" src = "~/Images/@Html.DisplayFor(modelItem => item.PhotoUrl)">
</td>
<td>@Html.DisplayFor(modelItem => item.Name)</td>
<td>@Html.DisplayFor(modelItem => item.BirthDate)</td>
<td>@Html.DisplayFor(modelItem => item.Description)</td>
<td>@Html.DisplayFor(modelItem => item.Category.Name)</td>
<td>@Html.DisplayFor(modelItem => item.CategoryId)</td>
<a asp-action = "EditAnimel" asp-route-id = "@item.AnimalId">
<input type = "submit" value = "Edit">
</a>
<a asp-action = "DeleteAnimel" asp-route-id = "@item.AnimalId">
<input type = "submit" value = "Delete">
</a>
}
Ниже приведена рабочая демонстрация, вы можете обратиться к ней.
Продуктконтроллер.cs:
[Route("product")]
public class ProductController : Controller
{
private IWebHostEnvironment webHostEnvironment;
public ProductController(IWebHostEnvironment _webHostEnvironment)
{
webHostEnvironment = _webHostEnvironment;
}
[Route("")]
[Route("index")]
[Route("~/")]
public IActionResult Index()
{
return View("Index", new Product());
}
[Route("save")]
[HttpPost]
public IActionResult Save(Product product, IFormFile photo)
{
if (photo == null || photo.Length == 0)
{
return Content("File not selected");
}
else
{
var path = Path.Combine(this.webHostEnvironment.WebRootPath, "images", photo.FileName);
var stream = new FileStream(path, FileMode.Create);
photo.CopyToAsync(stream);
product.Photo = photo.FileName;
}
ViewBag.product = product;
return View("Success");
}
}
Индекс.cshtml:
@model SingleFile.Models.Product
<html>
<head>
<meta name = "viewport" content = "width=device-width" />
<title>Index</title>
</head>
<body>
<form asp-controller = "product" asp-action = "save" method = "post" enctype = "multipart/form-data">
<table cellpadding = "2" cellspacing = "2">
<tr>
<td>Id</td>
<td>
<input type = "text" asp-for = "Id" />
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type = "text" asp-for = "Name" />
</td>
</tr>
<tr>
<td>Price</td>
<td>
<input type = "text" asp-for = "Price" />
</td>
</tr>
<tr>
<td>Photo</td>
<td>
<input type = "file" name = "photo" />
</td>
</tr>
<tr>
<td> </td>
<td><input type = "submit" value = "Save" /></td>
</tr>
</table>
</form>
</body>
</html>
Успех.cshtml:
<html>
<head>
<meta name = "viewport" content = "width=device-width" />
<title>Success</title>
</head>
<body>
<h3>Product Info</h3>
<table cellpadding = "2" cellspacing = "2" border = "1">
<tr>
<td>Id</td>
<td>@ViewBag.product.Id</td>
</tr>
<tr>
<td>Name</td>
<td>@ViewBag.product.Name</td>
</tr>
<tr>
<td>Price</td>
<td>@ViewBag.product.Price</td>
</tr>
<tr>
<td>Photo</td>
<td><img src = "~/images/@ViewBag.product.Photo" width = "120" /></td>
</tr>
</table>
</body>
</html>
Продукт
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public string Photo { get; set; }
}
У меня это не работает. Я думаю, что эта строка - моя проблема src = "~/Images/@Html.DisplayFor (modelItem => item.PhotoUrl)"
Попробуйте использовать <img src = "~/Images/@item.PhotoUrl" width = "120" asp-append-version = "true"/>
Пробовал то что вы сказали тоже не работает это хуже потому что даже картинки которые уже есть он тоже не показывает.
Он дает мне полный путь, а не какой wwwroot @Qing Guo C:\Users\danie\OneDrive\Desktop\Projectss\PetShop\PetShop.Client\wwwroot\Images\6.png
Вы имеете в виду, что вы можете показать картину?
Я не вижу изображение, потому что я получаю полный путь
Например: изображение, которое у меня уже есть в wwwroot, поэтому я получаю его так: HumiRabbit.jpg Но то, что я добавляю, дает мне полный путь
Поскольку вы кодируете model.Animal.PhotoUrl = path; «Итак, вы получаете полный путь. Если вам нужно имя фотографии, вы должны использовать 'model.Animal.PhotoUrl = PhotoUrl.FileName;' . Как и код в моей демонстрации, я использую ' product.Photo = photo.FileName;' .
Добро пожаловать! Рад, что это может помочь. Если мой ответ поможет вам решить вашу проблему, не могли бы вы принять его в качестве ответа? Если нет, не могли бы вы сообщить мне об этом? См.:Как получить доступ к ответу Спасибо.
проблема с путем... у вас есть локальный путь к файлу... должно быть что-то вроде "localhost/images/your_file.png"? (Я использую: AppContext.BaseDirectory... это каталог, в котором работает ядро, затем добавляю оттуда... затем я использую другой контроллер для загрузки файлов. Например: dl_file?id=file_id )