有没有一种方法可以将角度基准href用作图像路径中的变量？

Question

使用VS 2017中内置的Angular模板。Assets / image文件夹中有一个图像，因此ClientApp> src> Assets> images。

我在组件中引用该图像，例如：

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

在本地部署时，它可以工作，但是在部署到IIS后，会导致404错误。

在服务器上，该应用程序被部署到一个子文件夹：inetsrv8 / internal / MyApp

我必须在部署前更改BASE HREF才能使应用程序正常工作，因此我认为一种解决方法是沿BaseHref +'./pathToImage'的行为图像构建自定义路径。问题是我无法弄清楚如何获取BASE Href并将其放入变量中。

有没有更好的办法？合适的方法吗？如果没有，我将如何获得基本href？

Answer 1

尝试这个。

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

实际上，这取决于构建结构。最好的方法是检查angular-cli配置。否则ng built，请检查您的断言文件在哪里。

Answer 2

在 SCSS 中引用图像也有问题。使用 ~ 成功了：

$menu-icon-calendar: url('~/assets/menu/icon/calendar.png');

Answer 3

APP_BASE_HREF您可以在提供程序中添加注入令牌：

  providers: [
    {
      provide: APP_BASE_HREF,
      useFactory: (s: PlatformLocation) => s.getBaseHrefFromDOM(),
      deps: [PlatformLocation]
    }
  ],

然后将其注入服务（或组件）中

export class UrlService {

  constructor(
    @Inject(APP_BASE_HREF) private _baseHref: string
  ) { }

  baseHref(): string {
    return `/${strip(this._baseHref, '/')}`;
  }

  rootRelative(s: string): string {
    return `${rstrip(this.baseHref(), '/')}/${lstrip(s, '/')}`;
  }
}

然后在您的模板中，您可以使用该函数（如果您已注入 UrlService）

<img [src]="urlService.rootRelative('/assets/images/blah.png') />