Question

我正在编写一个简单的Angular2组件：

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

我正在使用与official docs非常相似的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:为前缀，这意味着它们不会在浏览器中呈现。我看到a workaround that involves de-sanitizing the string但它有点像黑客。如果我能让Webpack为我重写我的内联模板，我会避免这一切。

Answer 1

使用html-loader教授webpack html风格的“导入”。

我的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']
}

P.S：我不记得是否或为什么必须指定这个：

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

所以也许试着先看看那是什么：）

如何让我的构建工具链解析Angular2内联模板中的`src`引用？

1 个答案: