Question

我正在创建两个用于上传多张图片的模型。为此，我使用了一对多关系数据库来获取图片列表。但是此图片无法显示我的浏览器。这是我的代码：

模型

 public class test
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public List<Photo> Photos { get; set; }
    }



//another model



 public class Photo
    {
        public string PhotoId { get; set; }
        public string Image { get; set; }
    }

在这里我上传了多张图片

控制器


        [HttpPost]
        public IActionResult Create(test product, IFormFile[] photos)
        {
            test t = new test();
            if (photos == null || photos.Length == 0)
            {
                return Content("File(s) not selected");
            }
            else
            {
                product.Photos = new List<Photo>();
                foreach (IFormFile photo in photos)
                {
                    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/Images", photo.FileName);
                    var stream = new FileStream(path, FileMode.Create);
                    photo.CopyToAsync(stream);
                    //product.Photos.Add(photo.FileName);
                    product.Photos.Add(new Photo { Image = "Images/" + photo.FileName });
                }
            }
           
           
            _db.test.Add(product);
            _db.SaveChangesAsync();
            return View();
        }

我用于显示的此控制器：

  public IActionResult Index()
        {
           
            return View(_db.test.ToList());
        }

这是index.cshtml的视图

<h1 class="text-center text-danger">Buy Now!!</h1>
<br /><br />

@using Practise.Models
@model List<test>

<div class="row">

    @foreach (var laptop in Model)
    {
        <div class="col-4 ml-5">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="my-4 font-weight-normal">
                        <label style="font-size:23px; color:black;text-align:center">@laptop.Name</label>
                    </h4>
                </div>
                <img src="~/@laptop.Photos" alt="Card Image" class="card-img-top" style="height:300px;" />

                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <label style="font-size:20px;color:darkblue"><b>Price:@laptop.Price</b></label>
                        </div>


                        <a asp-action="Details" asp-controller="ShopShow" asp-route-id="@laptop.Id" class="btn btn-primary pull-right btn-outline-light">Details</a>
                    </div>
                </div>
            </div>
        </div>

    }
</div>

当我运行应用程序时。我找不到期望的输出。这意味着无法显示图像。

enter image description here

以上输出，我想在这里显示照片。这有什么解决方案？

Answer 1

假设即使存在多个图像，也只需要显示第一张图像。如下所示重写您的img标签

@if(laptop.Photos!=null && laptop.Photos.Count!=0)
{
   <img src="~/@laptop.Photos[0].Image" alt="Card Image" class="card-img-top" style="height:300px;" />
}

无法在一对多关系数据库中显示数据库中的图像

1 个答案: