React本地开发：如何访问项目外图片并模拟Azure Blob存储

1. 本地文件夹+API中转（简单易实现） #

在本地服务器（.NET Web API所在机器）创建独立文件夹（比如C:\LocalBlobStorage）模拟Blob容器，所有上传图片存在这里。通过.NET API提供两个核心接口，让前端统一通过API交互，和生产逻辑对齐：

• 上传接口：接收前端图片，保存到本地文件夹，返回模拟的"Blob URI"（例如/api/blob/[文件名]）
• 访问接口：根据文件名读取本地文件夹的图片，返回给前端

.NET API 图片访问接口示例 #

[HttpGet("blob/{fileName}")]
public IActionResult GetBlob(string fileName)
{
    var storagePath = Path.Combine("C:\\LocalBlobStorage", fileName);
    if (!System.IO.File.Exists(storagePath))
        return NotFound();
    
    var fileStream = new FileStream(storagePath, FileMode.Open);
    return File(fileStream, "image/jpeg"); // 根据实际图片类型调整MIME类型
}

React前端直接请求/api/blob/xxx.jpg即可获取图片，无需关心文件存储位置。

2. 用Azurite完全模拟Azure Blob API（零迁移成本） #

微软官方提供的免费本地Azure存储模拟器Azurite，可以1:1模拟Blob存储的所有API行为，不需要云账户。使用它时，你的代码和生产环境完全一致，仅需修改连接字符串指向本地服务：

• 安装：npm install -g azurite
• 启动Blob模拟器：azurite-blob --silent --location C:\LocalAzuriteStorage
• .NET API中替换连接字符串：DefaultEndpointsProtocol=http;AccountName=devstoreaccount1;AccountKey=Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==;BlobEndpoint=http://127.0.0.1:10000/devstoreaccount1;

后期切换到真实Azure Blob时，仅需替换连接字符串，无需修改业务代码。

3. 临时方案：配置React开发服务器访问外部目录（不推荐） #

如果只是临时测试，可给React开发服务器指定额外静态资源目录。以create-react-app为例，修改package.json的启动脚本：

"scripts": {
  "start": "react-scripts start --static C:\\LocalBlobStorage"
}

前端可直接通过http://localhost:3000/xxx.jpg访问该文件夹内的图片，但此方式和生产逻辑差异大，仅适合短期临时验证。

推荐优先级 #

优先选择Azurite模拟器，完全匹配生产API，后期迁移成本最低；其次是本地文件夹+API中转，实现简单且贴合生产流程；直接让React访问外部目录的方式尽量少用。

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