Angular中如何将base href作为变量用于图片路径？IIS部署遇404

你遇到的这个问题是Angular部署到非根目录时的典型场景——本地开发时base href默认是根路径/，层级相对路径能正常访问，但部署到IIS子目录后，资源的基准路径发生变化，导致之前的相对路径失效。下面给你两种解决方案，优先推荐第一种最优方案：

最优方案：利用Angular CLI的base-href配置自动处理资源路径 #

不需要手动拼接base href，Angular本身就支持根据部署路径自动调整资源引用，步骤如下：

1. 修改模板中的图片路径
   把之前的层级相对路径改成基于assets的根相对路径（相对于base href），直接写：

   <img src="assets/images/Logo.png" />
   

   这样不管组件在哪个路由层级，都会基于当前的base href去查找资源，避免了层级变化导致的路径失效问题。

2. 构建时指定base-href参数
   因为你的应用部署在IIS的inetsrv8/internal/MyApp子目录，构建时需要明确指定base href：

   ng build --base-href "/internal/MyApp/"
   

   如果你用的是VS2017的ASP.NET Core集成模板，还可以在angular.json中配置生产环境的baseHref，避免每次构建手动输入：
   找到projects -> 你的项目名 -> architect -> build -> configurations -> production，添加baseHref配置：

   "production": {
     "baseHref": "/internal/MyApp/",
     // 其他生产环境配置...
   }
   

   这样发布生产版本时，Angular会自动给所有资源路径加上/internal/MyApp/前缀，部署到IIS后就能正常访问图片了。

备选方案：手动获取base href构建路径 #

如果因为特殊场景必须手动拼接路径，你可以通过Angular的DOCUMENT服务获取当前的base href：

1. 导入依赖并注入DOCUMENT
   在组件文件中导入DOCUMENT并注入：

   import { Component, Inject } from '@angular/core';
   import { DOCUMENT } from '@angular/common';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html',
     styleUrls: ['./your-component.component.css']
   })
   export class YourComponentComponent {
     imageUrl: string;
   
     constructor(@Inject(DOCUMENT) private document: Document) {
       // 获取页面中的base标签href属性
       const baseHref = this.document.querySelector('base').getAttribute('href');
       // 拼接图片路径
       this.imageUrl = `${baseHref}assets/images/Logo.png`;
     }
   }
   

2. 在模板中绑定动态路径
   把模板中的图片src改成动态绑定：

   <img [src]="imageUrl" />
   

额外注意事项 #

• 确保IIS的internal/MyApp子目录已正确设置为应用程序，且静态文件访问权限正常。
• 本地开发时，如果生产环境配置了子目录的baseHref，记得单独设置开发环境的baseHref为/，避免本地访问异常。

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