3

我在一个 Angular 应用程序中工作，我已经设置了我的 webpack conf 以使用 file-loader 来加载我使用的图像。

我的应用程序的结构是

/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 “扫描”模板（内联或非内联）并查找图像文件引用以便我可以使用它？

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

0 回答 0