Question

使用VS 2017内置的Angular模板。我在assets / image文件夹中有一个图像，因此ClientApp＆gt; src＆gt;资产＆gt;图像。

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

def make_dict(lst):
    for name in lst:
        d = {k: [] for k in ('homework', 'quizzes', 'tests')}
        d['name'] = name
        yield d

list_of_names = ['lloyd', 'alice', 'tyler']

my_dicts = list(make_dict(list_of_names))

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

在服务器上，应用程序部署到子文件夹： inetsrv8 /内部/ MyApp的

我必须在部署之前更改BASE HREF以使应用程序正常工作，所以我认为修复将是沿着BaseHref +'。/ pathToImage'的方式为图像构建自定义路径。问题是我无法弄清楚如何抓住BASE Href将其放入变量中。

有更好的方法吗？一个正确的方法？如果没有，我将如何获得基础href？

Answer 1

在SCSS中也无法参考图像。使用〜可以达到目的：

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

Answer 2

试试这个。

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

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

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') />

有没有办法在图像路径中使用角度基础href作为变量？

3 个答案: