Blazor应用中无法通过img src访问本地文件及文件夹的问题求助

• 配置静态文件访问权限
  Blazor项目中，自定义非默认静态文件夹需要在Program.cs里配置静态文件中间件，让服务器允许访问content目录。添加以下代码：

  app.UseStaticFiles();
  // 映射自定义静态文件夹
  app.UseStaticFiles(new StaticFileOptions
  {
      FileProvider = new PhysicalFileProvider(
          Path.Combine(builder.Environment.ContentRootPath, "content")),
      RequestPath = "/content"
  });
  

  配置完成后，img标签的src应写为/content/images/目标图片名.后缀。

• 修正文件输出属性
  在Visual Studio中选中content文件夹下的图片文件，右键打开属性面板，将复制到输出目录设置为「如果较新则复制」或「始终复制」，确保编译后文件能同步到服务器输出目录。

• 修复编辑器自动补全

  • 打开项目的.csproj文件，手动添加以下配置，确保content目录被纳入项目管理：

    <ItemGroup>
      <Content Include="content\**\*">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      </Content>
    </ItemGroup>
    

  • 重启Visual Studio或重新加载项目，编辑器即可识别content文件夹的路径补全。

• 适配Blazor WASM项目（若适用）
  若为WASM项目，静态文件默认根目录是wwwroot，建议将content文件夹移至wwwroot内，或调整静态文件配置的路径映射逻辑，避免路径识别问题。

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