非常简单:需要webpack和Angular 2中的图像

Question

我在Angular 2 webpack应用程序中需要图像时遇到一些麻烦.

我已经尝试了三个或四个图像加载器,但我似乎无法正确配置它们并且HTML中的结果不正确.

例如,目前我有:

<img src='${require("../images/logo.png")}'>

包含此图像的文件是模板的一部分,如下所示:

@Component({
    selector: 'appstore-app',
    directives: [ ...ROUTER_DIRECTIVES ],
    styles: [require('../sass/appstore.scss').toString()],
    template: require('./app.component.html')
})

这会导致浏览器出错:

GET: http://localhost:8080/$%7Brequire(%22../images/logo.png%22)%7D 

我的webpack.config.js的图像加载器看起来像这样:

{ test: /\.(png|jpg|gif)$/, loader: "url-loader?limit=50000&name=[path][name].[ext]" }

我可能在这里混淆语法,但正如我所说,我已经尝试了一些方法.这不起作用.$ require使其成为HTML逐字逐句而不被转换!

如何将图像复制到构建文件夹或将它们打包为DataURL？

请帮忙!

Answer 1

找到了答案。

无需 $require 镜像中的 src；webpack 将使用正确的加载器来处理这个问题。