javascript - 非常简单 : requiring images in webpack and 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;使用 ____Url 代替。 Require 导致我使用 webpack 加载 Assets 的其他库出现问题....不需要。

     <img src="../images/logo.png">

//note styleUrl and templateUrl since you have a path not inline with component
        @Component({
            selector: 'appstore-app',
            directives: [ ...ROUTER_DIRECTIVES ],
            styleUrl: ['../sass/appstore.scss'],
            templateUrl: './app.component.html'
        })