ASP.NET Core 如何以實體路徑顯示圖片?

在 ASP.NET Core 中，你可以通過多種方式以實體路徑顯示圖片。以下是幾種實現這個功能的方法：

方法一：使用靜態文件中介軟體
最簡單的方法是使用 ASP.NET Core 提供的靜態文件中介軟體，將你的圖片放在 wwwroot 文件夾中，並直接訪問這些圖片。

將圖片放在 wwwroot 文件夾下的子文件夾中，例如 wwwroot/images。
配置靜態文件中介軟體（默認情況下已經配置）。
你的專案結構可能如下所示：

MyProject
│
├── wwwroot
│   └── images
│       └── myimage.jpg
│
├── Controllers
│   └── HomeController.cs
│
├── Views
│   └── Home
│       └── Index.cshtml
│
└── Startup.cs

在你的 Startup.cs 中，確保已經添加了靜態文件中介軟體：

csharp

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles(); // 啟用靜態文件

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

在你的視圖中，可以這樣訪問圖片：

html

<img src="~/images/myimage.jpg" alt="My Image" />

方法二：通過控制器提供文件
如果你需要從不同的文件夾或需要進行一些權限控制，可以通過控制器來提供文件。

創建一個文件夾來存儲圖片，例如 MyImages。
你的專案結構可能如下所示：

MyProject
│
├── MyImages
│   └── myimage.jpg
│
├── Controllers
│   └── HomeController.cs
│
├── Views
│   └── Home
│       └── Index.cshtml
│
└── Startup.cs

在控制器中創建一個方法來返回圖片。

csharp

using Microsoft.AspNetCore.Mvc;
using System.IO;

public class HomeController : Controller
{
    public IActionResult GetImage(string imageName)
    {
        var imagePath = Path.Combine(Directory.GetCurrentDirectory(), "MyImages", imageName);
        if (!System.IO.File.Exists(imagePath))
        {
            return NotFound();
        }
        
        var image = System.IO.File.OpenRead(imagePath);
        return File(image, "image/jpeg");
    }
}

在視圖中使用該方法來顯示圖片。

html

<img src="@Url.Action("GetImage", "Home", new { imageName = "myimage.jpg" })" alt="My Image" />

方法三：使用自定義路由提供靜態文件

在 Startup.cs 中配置自定義路由。

csharp

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles(); // 啟用靜態文件

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        // 自定義路由提供靜態文件
        endpoints.MapGet("/images/{imageName}", async context =>
        {
            var imageName = context.Request.RouteValues["imageName"].ToString();
            var imagePath = Path.Combine(env.ContentRootPath, "MyImages", imageName);
            if (System.IO.File.Exists(imagePath))
            {
                var image = await System.IO.File.ReadAllBytesAsync(imagePath);
                context.Response.ContentType = "image/jpeg";
                await context.Response.Body.WriteAsync(image, 0, image.Length);
            }
            else
            {
                context.Response.StatusCode = 404;
            }
        });
    });
}

在視圖中訪問圖片。

html

<img src="/images/myimage.jpg" alt="My Image" />

通過這些方法，你可以在 ASP.NET Core 中以實體路徑顯示圖片，根據你的需求選擇合適的方法。