Blazor Server获取目录文件报错：无无参构造函数无法创建Index实例

错误原因 #

Blazor Server组件实例化时要求必须有无参数构造函数，你通过带参数的构造函数注入IWebHostEnvironment，导致框架无法动态创建组件实例，抛出MissingMethodException。

修正步骤及代码 #

1. 改用属性注入服务 #

移除带参数的构造函数，用[Inject]特性注入IWebHostEnvironment，这是Blazor组件注入服务的标准方式。

2. 调整初始化时机 #

OnParametersSet会在组件参数变化时重复触发，可能导致多次加载文件，改用OnInitialized确保仅在组件首次初始化时执行一次文件加载逻辑。

3. 修正图片路径 #

你当前添加的是本地物理文件路径，<img>标签的src需要的是相对于wwwroot的URL路径（比如/pics/xxx.jpg），所以要从物理路径中提取文件名，组合成正确的URL。

完整修正后的index.razor代码：

@foreach(string fileUrl in fileUrls)
{
    <img src="@fileUrl" style="margin: 8px; width: 180px; border-radius: 4px;" />
}

@code {
    [Inject]
    private IWebHostEnvironment Environment { get; set; }
    private List<string> fileUrls = new List<string>();

    protected override void OnInitialized()
    {
        GetFileUrls();
    }

    private void GetFileUrls()
    {
        var picsDirectory = Path.Combine(Environment.WebRootPath, "pics");
        // 先检查目录是否存在，避免抛出异常
        if (!Directory.Exists(picsDirectory)) return;

        foreach (var physicalFile in Directory.GetFiles(picsDirectory))
        {
            var fileName = Path.GetFileName(physicalFile);
            // 组合成wwwroot下的相对URL
            var imageUrl = $"/pics/{fileName}";
            fileUrls.Add(imageUrl);
            Console.WriteLine($"{imageUrl} 已添加到列表");
        }
    }
}

额外说明 #

• 代码中添加了基础的图片样式，你可以根据需求调整尺寸、间距等样式属性。
• 增加了目录存在性检查，避免因wwwroot/pics目录不存在而引发异常。

内容的提问来源于stack exchange，提问作者Vischi