Как сделать так, чтобы изображение правильно отображалось на моем сайте?
Работаю над проектом ASP.NET, и моя текущая тема — ресторан. Мой вопрос: я сделал элемент Scaffolded для создания «MealsController», и мои кнопки («Редактировать», «Создать», «Подробности», «Удалить») работают нормально.
Однако в настоящее время я застрял в том, как отобразить изображение для определенного блюда на вкладке «Подробности».
Метод My MealsController Details:
public async Task<IActionResult> Details(int? id)
{
if (id == null)
{
return NotFound();
}
var meal = await _context.Meals
.FirstOrDefaultAsync(m => m.MealID == id);
if (meal == null)
{
return NotFound();
}
return View(meal);
}
И мои Views/Meals/Details.cshtml:
@model RestaurantModule7.Models.Meal
@{
ViewData["Title"] = "Details";
}
<h1>Details</h1>
<div>
<h4>Meal</h4>
<hr />
<dl class = "row">
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.Title)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.Title)
</dd>
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.Price)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.Price)
</dd>
</dl>
</div>
<div>
<a asp-action = "Edit" asp-route-id = "@Model.MealID">Edit</a> |
<a asp-action = "Index">Back to List</a>
</div>
Ваша модель RestaurantModule7.Models.Meal должна содержать некоторую информацию, которая позволит вашему представлению записать путь к этому файлу в выходном HTML. Часто это просто путь к файлу (например, /Images/Meals/TurkeyAndGravy.jpg). Ваш вид будет включать что-то похожее на это для отображения изображения: <img src = "@(Model.ImageUrl)" title='Turkey!' />
Какой образ вы хотите показать? Вы загрузили изображение на сервер при создании Meal? Или вы знаете конкретное изображение и хотите показать его в поле зрения?
Ответы 1
Когда вы добавляете изображения динамически, вам нужно будет передавать их из действия вашего контроллера.
Как этого добиться?
Мне нравится решать эту проблему так: у меня есть путь в моем appsettings.json, который будет указывать на место в моей папке wwwroot.
"FilePaths": {
"Pictures": "wwwroot/content/img/",
},
Итак, теперь у вас может быть такой контроллер
public class MyController : Controller
{
public string _imgPath;
public MyController(IConfiguration config)
{
_imgPath = config["FilePaths:Pictures"];
}
//save file
public async Task<IActionResult> SaveMeal(IFormFile image)
{
var fileName = generateName();
var savePath = Path.Combine(_imgPath, fileName);
using (var fileStream = new FileStream(savePath, FileMode.Create))
{
await image.CopyToAsync(fileStream);
}
//make sure to save the file name in your Meal model.
}
// this is what will stream the image from your controller.
//imgName is your file name.
[HttpGet("{imgName}")]
public IActionResult GetImg(string imgName)
{
var readPath = Path.Combine(_imgPath, imgName);
var fileStream = FileStream(readPath, FileMode.Open, FileAccess.Read);
return new FileStreamResult(fileStream , $"image/{imgName.Split('.')[1]}");
}
}
Итак, теперь, если у вас есть элемент <img>, вы хотите установить src так, чтобы он указывал на действие GetImg, так что по существу /controller/action/{imgName}
Примечание: вам может понадобиться использовать IHostingEnvironment, чтобы указать на каталог с исходным кодом.
Добавление шагов
Это логические шаги:
- Убедитесь, что у вас есть переменная, указывающая, где вы хотите сохранить файлы.
- Загрузите свой файл (изображение) в бэкенд
- Сохраните файл (изображение) везде, где указывает ваша переменная.
- Убедитесь, что вы записали имя этого файла и сохранили его где-нибудь, откуда вы можете его получить, желательно в базе данных по записи, к которой относится изображение.
На данный момент мы знаем, где мы сохраняем файлы, у нас есть файл, который мы загрузили, и у нас есть имя файла, который мы хотим получить. Теперь давайте воспроизведем этот файл с контроллера.
- Создайте элемент img html и сделайте так, чтобы src указывал на действие контроллера.
- Убедитесь, что маршрут, связанный с атрибутом src, содержит имя файла.
- Получить имя файла из маршрута в качестве значения в действии
- используйте это значение в сочетании с нашей начальной переменной, которая указывает, где файл сохранен, чтобы мы могли читать из него.
- как только мы читаем из потока (по сути, просто пакеты байтов), наше изображение должно быть отрисовано.
Хорошо, я новичок, но как я это понимаю - создаю папку, в которой я храню изображения, затем я создаю новый контроллер и связываю его с этой папкой и с конкретным изображением, верно? Извините, что это может показаться разговором с полным идиотом, но я все еще учусь :)
Краткий ответ: ваш
modelдолжен содержать эту информацию - например. указатель на файл изображения. Соглашения об именах файлов, вероятно, будут иметь большое значение.