Как сделать так, чтобы изображение правильно отображалось на моем сайте?

Question

Работаю над проектом ASP.NET, и моей текущей темой является Ресторан. У меня вопрос, я сделал элемент Scaffolded для создания "MealsController", и мои кнопки (Edit, Create, Details, Delete) работают нормально.

Однако в настоящее время я застрял в том, как отобразить изображение для определенного приема пищи на вкладке «Подробности».

My MealsController Подробности Метод:

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

И мои взгляды / Питание / 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>

Answer 1

Когда вы добавляете изображения динамически, вам нужно будет передавать их из действия вашего контроллера.

Как этого добиться?

Мне нравится решать эту проблему, у меня есть путь вmy 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, чтобы указать наваш каталог исходного кода.

Добавление шагов

Это логические шаги:

1. Убедитесь, что у вас есть переменная, которая указывает на гдеВы хотите сохранить свои файлы
2. Загрузить свой файл (изображение) на сервер
3. Сохранить файл (изображение), где ваша переменная указывает на
4. Убедитесь, что вы записали имяэтого файла и сохранить его где-нибудь, где вы можете получить его, предпочтительно в базе данных противзапись, к которой относится изображение.

На данный момент мы знаем, где мы сохраняем файлы, у нас есть файл, который мы загрузили, и у нас есть имя файла, который мы хотим получить.Теперь давайте передадим этот файл из контроллера.

1. Создайте элемент img html и заставьте src указывать на действие контроллера
2. Убедитесь, что маршрут, связанный с атрибутом srcсодержит имя файла.
3. Получить имя файла из маршрута в качестве значения в действии
4. использовать это значение вместе с нашей исходной переменной, которая указывает, где находится файлсохранено, чтобы мы могли читать из него.
5. как только мы читаем из потока (по сути, это просто пакеты байтов), наше изображение должно быть отображено.