Angular 10如何访问后端文件夹内的图片并在index.html中加载

默认Angular开发服务器仅会托管src目录下的资源，无法直接访问同级Backend目录内的文件，可通过以下两种常用方案实现需求： #

方案1：开发环境配置代理（仅本地调试适用） #

• 打开项目根目录下的angular.json文件，找到serve配置项，新增proxyConfig参数：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxyConfig": "proxy.conf.json"
  }
}

• 在项目根目录新建proxy.conf.json文件，填入以下配置：

{
  "/uploads": {
    "target": "http://localhost:你后端服务运行的端口号",
    "secure": false
  }
}

• 在index.html或组件模板中直接用/uploads/profilepic.jpg路径引用图片即可，示例：
  <img src="/uploads/profilepic.jpg" alt="用户头像">
  该方案仅适配本地开发场景，生产部署需要额外配置后端静态资源规则

方案2：后端配置静态资源托管（开发、生产场景均适用） #

• 在你的后端服务中配置/uploads路径为公开静态资源目录，同时开启跨域访问权限
• 前端引用时直接填写后端服务的完整访问路径即可，示例：若后端服务运行在http://localhost:3000，则引用路径为http://localhost:3000/uploads/profilepic.jpg

注意事项 #

• 不要尝试使用../Backend/uploads/xxx这类相对路径直接引用资源，Angular打包时不会将Backend目录资源纳入打包范围，上线后会直接返回404错误
• 生产环境部署时建议将上传类资源放在专门的静态资源服务或对象存储中，不要和项目源码存放在同一目录

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