如何使用数据库中保存的路径从 .net core web api wwwroot 文件夹获取图像

Question

我正在使用 Angular 7 和 .net core webAPI 3.1 创建一个电子商务网站。Angular 和 WebAPI 都是单独创建的。我已将产品详细信息（即名称、价格、图像路径等）保存在数据库中，并将图像保存到 .net 项目中的 wwwroot\Products 文件夹中。图像的路径与产品详细信息一起保存在数据库中。在角度方面，我想显示带有详细信息和图像的产品列表。现在我面临一个问题，如何获取带有角度图像的产品列表。我可以使用图像文件路径获取产品的所有详细信息（即产品列表），但图像不可访问，因为路径是服务器端 wwwroot\Products 文件夹，无法从角度访问。那么我怎样才能获得产品的图像

我获取图像详细信息的模型如下：

public class ProductImagesVM
{
    [Key]
    public Guid ProductId { get; set; }
    public string Name { get; set; }
    public string Code { get; set; }
    public decimal Price { get; set; }
    public decimal Discount { get; set; }
    public decimal DiscountPerc { get; set; }
    public Guid CategoryId { get; set; }
    public string Material { get; set; }       
    public string Description { get; set; }
    public int Status { get; set; }
    public Guid ImageId { get; set; }
    public string Path { get; set; }
    public string ColorId { get; set; }
    public string SizeId { get; set; }
    public int Quantity { get; set; }
    public int TotalAmount { get; set; }

}

这是我的控制器方法来检索产品列表

 [HttpGet]
    [Route("[action]")]
    public IActionResult GetProductImagesVM()
    {
        return Ok(this.db.ProductImagesVM.ToList());
    }

我的示例响应是

[
{
    "productId": "9e9253dc-219c-43fd-8725-2b43c415afd7",
    "name": "Product 1",
    "code": "11",
    "price": 500,
    "discount": 300,
    "discountPerc": 60,
    "categoryId": "61a4d55c-6c42-4ad4-a467-382840122a25",
    "material": "khadar",
    "description": "description",
    "status": 1,
    "imageId": "99588638-025a-4d21-a591-56ec06e3bcd3",
    "path": "Products\\24a9bedf-9d82-4683-902a-e160a87e25b9.jpg",
    "colorId": "",
    "sizeId": "",
    "quantity": 0,
    "totalAmount": 0
},
{
    "productId": "4ae044d6-f177-404f-91f9-c0feab678310",
    "name": "Men Shoes",
    "code": "11",
    "price": 999,
    "discount": 70,
    "discountPerc": 7,
    "categoryId": "009e546f-2fe5-4ab2-b205-7ae562d82a32",
    "material": "khadar",
    "description": "description",
    "status": 1,
    "imageId": "012f0f16-4c5e-4234-a483-861f5feff0da",
    "path": "Products\\d67d98b4-cd38-489d-bd2b-512729e94317.jpg",
    "colorId": "",
    "sizeId": "",
    "quantity": 0,
    "totalAmount": 0
}

]

这就是我将图像保存到服务器端的 wwwroot/Products 的方法

  [HttpPost]
    [Route("[action]")]
    public IActionResult AddProducts()
    {
        try
        {

            var files = Request.Form.Files;
            if (files != null && files.Count > 0)
            {
                var product = JsonConvert.DeserializeObject<Product>(Request.Form["product"]);
                var images = new List<Images>();
                var productSizeLink = JsonConvert.DeserializeObject<List<ProductSizeLink>>(Request.Form["size"]);
                var productColorLink = JsonConvert.DeserializeObject<List<ProductColorLink>>(Request.Form["colors"]);
                // var category = JsonConvert.DeserializeObject<Category>(Request.Form["category"]);
                // var indexImg=Convert.ToInt32(Request.Form["imgIndex"]);


                this.db.Product.Add(product);
                foreach (var item in productSizeLink)
                {
                    this.db.ProductSizeLink.Add(item);
                }
                foreach (var item in productColorLink)
                {
                    this.db.ProductColorLink.Add(item);
                }

                string webRootPath = this._env.WebRootPath;
                var folderName = "Products";
                string newPath = Path.Combine(webRootPath, folderName);
                if (!Directory.Exists(newPath))
                {
                    Directory.CreateDirectory(newPath);
                }
                var pathtodb = "";
                var i = 1;
                foreach (var item in files)
                {
                    if (item.Length > 0)
                    {
                        string fileName = item.FileName;
                        var gid = Guid.NewGuid().ToString();
                        string fullPath = Path.Combine(newPath, gid + Path.GetExtension(fileName));
                        pathtodb = Path.Combine(folderName, gid + Path.GetExtension(fileName));
                        images.Add(new Images { ImageId = Guid.NewGuid(), ProductId = product.ProductId, Path = pathtodb, OrderBy = i++ });
                        using (var stream = new FileStream(fullPath, FileMode.Create))
                        {
                            item.CopyTo(stream);
                        }
                    }

                }
                foreach (var item2 in images)
                {
                    Console.WriteLine(item2.ImageId + " <<----------------------------");
                    this.db.Images.Add(item2);

                }

                this.db.SaveChanges();

                return Ok("Product Added Successfully");

            }

            return Ok("No files found");
        }

        catch (Exception e)
        {

            return BadRequest(e.Message);
        }


        // return Ok("Done");
    }

Answer 1

像这样使用img（xxx是webapi的端口）：

\n

<img src="https://localhost:xxx/images/red.PNG">\n

\n

这是一个演示（我在启动时有 cors）：

\n

\n

Startup.cs(添加app.UseStaticFiles();如下\xef\xbc\x8c这样就可以通过url获取img):

\n

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n        {\n            if (env.IsDevelopment())\n            {\n                app.UseDeveloperExceptionPage();\n            }\n\n            app.UseHttpsRedirection();\n\n            //add it here\n            app.UseStaticFiles();\n\n\n            app.UseRouting();\n            app.UseCors(MyAllowSpecificOrigins);\n\n            app.UseAuthorization();\n\n            app.UseEndpoints(endpoints =>\n            {\n                endpoints.MapControllers();\n            });\n        }\n

\n

角度:\n

\n