如何獲得我的構建工具鏈來解析Angular2內聯模板中的src引用？

Question

我正在編寫一個簡單的Angular2組件：

@Component({ ...,
  template: `
    <img id="logo" src="../img/logo.png">
  `, ...
})

我使用的webpack配置與官方文檔非常相似，因此.component.ts文件通過awesome-typescript-loader傳遞。 當我構建項目時，該組件在頁面中顯示為<img id="logo" src="../img/logo.png"> ，即，Webpack不會重寫圖像URL。 我相信這是因為沒有為src屬性解析內聯模板。

我嘗試通過做一個明確的require()解決此問題：

const SITE_LOGO = require("../img/logo.png");

@Component({ ...,
  template: `
    <img id="logo" [src]="logo">
  `, ...
})

export class AppComponent {
  logo = SITE_LOGO;
}

這似乎是很多額外的工作，但確實可以完成工作-圖像以src="data:image/png;base64..." 。

自動修復源會很好，但是還有一個更大的問題：當Webpack不進行解析時，分配將通過Angular的DOM清理器進行，並且SVG圖像會以unsafe:為前綴unsafe:這意味着它們不會被渲染在瀏覽器中。 我看到了一種解決方法，其中涉及對字符串進行消毒處理，但似乎有點像hack。 如果可以讓Webpack為我重寫內聯模板，我會避免所有這些情況。

Answer 1

使用html-loader來教webpack html樣式的“導入”。

我的webpack.config.js有這樣的webpack.config.js ：

{
    test: /\.html$/i,
    loader: 'html-loader?root=assets&attrs[]=img:src&attrs[]=image:src&attrs[]=image:xlink:href',
    exclude: ['./src/index.html']
}

PS：我不記得是否或為什么必須指定以下內容：

?root=assets&attrs[]=img:src&attrs[]=image:src&attrs[]=image:xlink:href

所以也許先看看那是什么:)