如何显示本地驱动器图片？实现外部目录图片的浏览器可访问路径转换

要让浏览器能访问项目目录外的本地图片，不能直接把本地路径拼接到URL里（浏览器无法直接读取本地文件系统），需要通过后端做映射或文件接口来实现，以下是两种可行方案：

方案1：配置静态文件中间件映射外部目录 #

通过ASP.NET Core的静态文件中间件，把本地图片目录映射到一个URL前缀，让浏览器可以通过该前缀访问文件。

步骤1：在Program.cs中添加静态文件配置 #

var builder = WebApplication.CreateBuilder(args);

// ... 其他服务配置 ...

var app = builder.Build();

// 配置外部图片目录的静态文件映射
var externalFileDir = @"D:\EdsabPmGetsDocument";
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(externalFileDir),
    RequestPath = "/external-images" // 浏览器访问的URL前缀
});

// 保留默认的项目静态文件配置（如果需要）
app.UseStaticFiles();

// ... 其他中间件配置（路由、授权等） ...

app.Run();

步骤2：修改你的业务代码生成正确的URL #

替换原有生成ImagePath的逻辑，把本地路径转换为映射后的URL：

public async Task<IEnumerable<DocumentInfoDto>> DocumentFile(string featureId)
{
    var featureDocument = await _featureDocumentRepository.FeatureDocumentData(featureId);
    
    if (featureDocument is null || !featureDocument.Any()) 
        throw new NotFoundException();

    var rootDir = @"D:\EdsabPmGetsDocument";
    var firstDoc = featureDocument.FirstOrDefault();
    if (firstDoc == null) throw new NotFoundException();

    // 正确拼接本地路径（用Path.Combine避免分隔符错误）
    var localPath = Path.Combine(rootDir, StaticPath, firstDoc.DocPath);
    var directoryInfo = new DirectoryInfo(localPath);
    var fileInfos = directoryInfo.GetFiles("*.*", SearchOption.AllDirectories);

    // 生成浏览器可访问的URL
    var imageUrls = fileInfos.Select(file => 
    {
        // 获取文件相对于根目录的路径
        var relativePath = Path.GetRelativePath(rootDir, file.FullName);
        // 替换本地路径分隔符为URL的/，拼接前缀
        return $"/external-images/{relativePath.Replace(Path.DirectorySeparatorChar, '/')}";
    });

    return (from url in imageUrls 
            let matchedDoc = featureDocument.FirstOrDefault(doc => doc.DocName == Path.GetFileName(url))
            where matchedDoc != null
            select new DocumentInfoDto 
            {
                Id = matchedDoc.Id,
                ImagePath = url, // 这里返回的是URL而非本地路径
                Description = matchedDoc.Description,
                DocName = matchedDoc.DocName,
                DocExtention = matchedDoc.DocExtension
            }).ToList();
}

方案2：创建API接口返回文件流 #

如果需要更严格的权限控制（比如验证用户权限后再返回文件），可以写一个API接口，接收文件相对路径，读取本地文件并返回给浏览器。

步骤1：新增文件访问接口 #

[ApiController]
[Route("api/files")]
public class FileController : ControllerBase
{
    private readonly string _rootDir = @"D:\EdsabPmGetsDocument";

    [HttpGet("get-image")]
    public IActionResult GetImage(string relativePath)
    {
        // 安全校验：防止路径遍历攻击（确保请求的文件在允许的根目录内）
        var fullPath = Path.Combine(_rootDir, relativePath);
        if (!fullPath.StartsWith(_rootDir, StringComparison.OrdinalIgnoreCase))
        {
            return Forbid();
        }

        if (!System.IO.File.Exists(fullPath))
        {
            return NotFound();
        }

        // 获取文件MIME类型
        var contentType = new FileExtensionContentTypeProvider().TryGetContentType(fullPath, out var type) 
            ? type 
            : "application/octet-stream";

        // 返回文件流
        return PhysicalFile(fullPath, contentType);
    }
}

步骤2：修改业务代码生成接口URL #

// 替换原有imageInfo的生成逻辑
var imageUrls = fileInfos.Select(file => 
{
    var relativePath = Path.GetRelativePath(rootDir, file.FullName);
    // 生成API请求URL，对路径编码避免特殊字符问题
    return $"/api/files/get-image?relativePath={Uri.EscapeDataString(relativePath)}";
});

关键注意事项 #

1. 路径安全：无论哪种方案，都必须校验请求的文件是否在允许的根目录内，防止恶意用户通过路径遍历访问系统敏感文件。
2. 路径拼接：始终用Path.Combine拼接本地路径，避免因分隔符（\或/）导致的错误。
3. MIME类型：返回文件时要设置正确的MIME类型，确保浏览器能正确解析图片。

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