用于Angular中静态图像的Webpack和文件加载器

Question

我正在Angular应用程序中工作，我已经设置了我的webpack conf来使用文件加载器来加载我使用的图像。

我的应用程序的结构是

/src
   /app
      /components
         /my-header
            my-header.component.ts
   /styles
   /assets
      mylogo.jpg

我的webpack正在使用文件加载器

{ 
   test: /assets\/.*(jpg|png|woff|woff2|eot|ttf|svg)$/, 
   loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

然后我在我的组件中使用它

@Component({
  selector: 'app-header',
  template: `
    <header class="header">
      <div class="header__logo">
        <a routerLink="/">
          <img [src]="logo" />
        </a>
      </div>
      ...
    </header>
  `
})
export class MyHeaderComponent {
  logo: string = require('../../../assets/mylogo.jpg');
...

这是有效的，但在我看来需要使用这种方式所需的所有图像时会感到有点痛苦。

由于这些是静态图像，有没有办法告诉webpack＆＃34;扫描＆＃34;模板（内联或不内联）并查找图像文件引用，以便我可以使用它？

<img src="/assets/mylogo.jpg" />