有没有办法在图像路径中使用 angular base href 作为变量？答案

【问题标题】：Is there a way to use angular base href as variable in image path?有没有办法在图像路径中使用 angular base href 作为变量？
【发布时间】：2018-10-28 06:23:04
【问题描述】：

使用 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？

【问题讨论】：

<img src="./assets/images/Logo.png" />
好吧，我以为我试过了。奇迹般有效。我想我是想太花哨了。谢谢。添加为答案。
已添加 ;) .... 如果有帮助，请标记为答案或放弃投票

标签： angular

【解决方案1】：

试试这个。

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

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

【讨论】：

但是你仍然需要让你的应用程序是“可开发的”，所以你刚刚打破了：ng serve

【解决方案2】：

在 SCSS 中也无法引用图像。使用 ~ 成功了：

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

【讨论】：

【解决方案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') />

【讨论】：