使用Asp.Net Core+React搭建电商站，如何访问public外的图片？

你遇到的问题核心是浏览器端的React无法直接访问本地文件系统里的后端文件夹——浏览器只能访问前端项目public目录下的资源，或者通过后端接口暴露出来的静态资源。直接写本地绝对路径、跨项目的相对路径都会失效，因为这些路径在浏览器环境里是无法解析的。

下面给你两种可行的解决办法：

方法一：通过Asp.Net Core 暴露后端图片文件夹 #

这是更合理的方案（尤其是如果图片是用户上传的动态资源时），步骤如下：

1. 在Asp.Net Core项目的启动文件（Program.cs 或旧版本的 Startup.cs）中，配置静态文件中间件，把你的ProductPhotos文件夹注册为可访问的静态资源目录：

// Program.cs 示例（.Net 6+）
using Microsoft.Extensions.FileProviders;
using System.IO;

var builder = WebApplication.CreateBuilder(args);
// ... 其他配置代码 ...

var app = builder.Build();
// ... 其他中间件配置（比如app.UseRouting()等） ...

// 添加这一段，暴露ProductPhotos文件夹
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "ProductPhotos")
    ),
    RequestPath = "/ProductPhotos" // 浏览器访问时的路径前缀
});

// ... 其他中间件（比如app.UseAuthorization()、app.MapControllers()等） ...
app.Run();

2. 配置完成后，React里直接用后端暴露的路径拼接图片名即可：

this.state = {
    Path: '/ProductPhotos/'
}

// 调用时
<CardItem src={this.state.Path + pro.ProductPhotoName} ... />

方法二：将图片移至React的public文件夹 #

这是React官方推荐的静态资源存放方式，适合图片是固定的静态资源（比如商品默认图、网站logo等）：

• 直接把ProductPhotos里的图片复制到React项目的public目录下（或者public/ProductPhotos子目录），然后用相对路径访问：

this.state = {
    Path: '/ProductPhotos/'
}

这种方式不需要配置后端，操作简单，但如果是用户上传的动态商品图，不建议用这种方法——因为public目录在项目编译部署后是静态的，无法动态添加新文件。

总结 #

• 如果是静态商品图（开发阶段就确定的图片）：直接放到React的public文件夹最省心。
• 如果是动态上传的商品图：必须用方法一，通过Asp.Net Core暴露后端文件夹来访问。

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