React+ASP.NET项目中如何实现图片相对路径正常加载

我用React和ASP.NET开发图片列表组件PostList，看到有些网站图片src采用/snapshots/xxx/xxx.jpeg这类根相对路径格式。我的项目wwwroot目录下有Images文件夹，想要实现类似路径效果，但直接使用/Images/1.png作为图片src时无法加载，而用完整路径https://localhost:44382/Images/1.png却能正常显示。

相关代码 #

控制器代码

[ProducesResponseType(StatusCodes.Status200OK, Type = typeof(List<GetPostDto>))]
[HttpGet("Get")]
public IActionResult GetPosts()
{
  return Ok(_postService.GetPosts());
}

模型代码

public class GetPostDto
{
 public long Id { get; set; }
 public string ImagePath => $"/Images/{Id}.png";
 public long LikeCount { get; set; }
 public long ViewCount { get; set; }
}

前端代码

import { Link } from 'react-router-dom'

interface IPost {
    id: number,
    likeCount: number,
    viewCount: number,
    imagePath: string
}

interface IPostPreview {
    post: IPost
}

export default function PostPreview({ post }: IPostPreview) {
    return (
        <Link to={`post/${post.id}`} className='h-[200px] w-[200px] flex border'>
            <img alt='qwe' src={`https://localhost:44382${post.imagePath}`} className='flex justify-between px-3 w-full h-full' />
        </Link>
    )
}

1. 确认ASP.NET静态文件配置 #

ASP.NET默认将wwwroot作为静态文件根目录，但必须确保在Program.cs中启用静态文件中间件，且该中间件要放在路由配置之前：

var builder = WebApplication.CreateBuilder(args);

// 其他服务注册代码...

builder.Services.AddControllersWithViews();

var app = builder.Build();

// 启用静态文件服务，这是让wwwroot下的文件可访问的核心
app.UseStaticFiles();

// 其他中间件配置（比如认证、授权等）...

app.MapControllers();

app.Run();

配置后，/Images/1.png会自动映射到wwwroot/Images/1.png路径。

2. 配置React开发环境代理 #

如果React项目独立运行（比如在3000端口），而ASP.NET后端在44382端口，直接用/Images/1.png会请求React开发服务器的端口，而非后端端口。此时需要在React项目根目录的package.json中添加代理配置：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "https://localhost:44382",
  // 其他项目配置...
}

配置完成后，React开发服务器会将未知路径的请求转发到指定的后端地址，此时/Images/1.png会自动转发到https://localhost:44382/Images/1.png。

3. 前端简化路径使用 #

修改PostPreview组件的img标签，去掉硬编码的后端地址，直接使用模型返回的相对路径：

<img alt='qwe' src={post.imagePath} className='flex justify-between px-3 w-full h-full' />

4. 生产环境部署注意事项 #

生产环境中，将React打包后的文件放到ASP.NET的wwwroot目录下，此时前端和后端同域，/Images/1.png会直接请求当前域名下的静态资源，无需额外代理配置。

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