Пытаюсь подключиться к wwwroot и получить образ

Я работаю в технологии 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>

}

проблема с путем... у вас есть локальный путь к файлу... должно быть что-то вроде "localhost/images/your_file.png"? (Я использую: AppContext.BaseDirectory... это каталог, в котором работает ядро, затем добавляю оттуда... затем я использую другой контроллер для загрузки файлов. Например: dl_file?id=file_id )

pcalkins 07.04.2022 23:17
Применение градиента к изображению с помощью CSS
Применение градиента к изображению с помощью CSS
Здравствуйте, братья и сестры, как дела? Недавно я застрял на применении градиента к изображению. Я применял это много раз, но иногда наши требования...
Получение URL-адреса изображения курса в Moodle с помощью PHP
Получение URL-адреса изображения курса в Moodle с помощью PHP
Moodle - это популярная система управления обучением с открытым исходным кодом, используемая многими учебными заведениями и организациями по всему...
0
1
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ниже приведена рабочая демонстрация, вы можете обратиться к ней.

Продуктконтроллер.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>&nbsp;</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)"

Yosef Abada 08.04.2022 06:05

Попробуйте использовать <img src = "~/Images/@item.PhotoUrl" width = "120" asp-append-version = "true"/>

Qing Guo 08.04.2022 08:58

Пробовал то что вы сказали тоже не работает это хуже потому что даже картинки которые уже есть он тоже не показывает.

Yosef Abada 08.04.2022 09:43

Он дает мне полный путь, а не какой wwwroot @Qing Guo C:\Users\danie\OneDrive\Desktop\Projectss\PetShop\PetShop.Client\wwwroot\Images\6.png

Yosef Abada 08.04.2022 09:43

Вы имеете в виду, что вы можете показать картину?

Qing Guo 08.04.2022 09:46

Я не вижу изображение, потому что я получаю полный путь

Yosef Abada 08.04.2022 09:54

Например: изображение, которое у меня уже есть в wwwroot, поэтому я получаю его так: HumiRabbit.jpg Но то, что я добавляю, дает мне полный путь

Yosef Abada 08.04.2022 09:56

Поскольку вы кодируете model.Animal.PhotoUrl = path; «Итак, вы получаете полный путь. Если вам нужно имя фотографии, вы должны использовать 'model.Animal.PhotoUrl = PhotoUrl.FileName;' . Как и код в моей демонстрации, я использую ' product.Photo = photo.FileName;' .

Qing Guo 08.04.2022 10:06

Добро пожаловать! Рад, что это может помочь. Если мой ответ поможет вам решить вашу проблему, не могли бы вы принять его в качестве ответа? Если нет, не могли бы вы сообщить мне об этом? См.:Как получить доступ к ответу Спасибо.

Qing Guo 08.04.2022 10:15

Другие вопросы по теме