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。要求使用webpack加载资产导致我与其他库的问题......不需要它。

     <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'
        })

Answer 2

找到答案。

没有必要$在图像中需要src; webpack将使用正确的加载器来处理这个问题。

Answer 3

例如

<img src={{appstore-logo}}>

，您的组件代码是

@Component({
    selector: 'appstore-app',
    directives: [ ...ROUTER_DIRECTIVES ],
    styles: [require('../sass/appstore.scss').toString()],
    template: require('./app.component.html')
})
export class AppStoreComponent {
    private appStoreImage: any = require('../images/logo.png');
}

您必须在应用此组件之前插入此代码。

declare function require(name: string): string;

AppModule中的这段代码

如果有更好的方法，请告诉我。

Answer 4

我没有证明检查这个，但这是一般的想法：

以下列方式将其提供给相应控制器中的变量

$scope.imageSrc = require('../images/logo.png');

然后在您的模板中，imageSrc将根据您的加载程序配置进行base64编码或数据网址。

<img src='{{imageSrc}}'>

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

4 个答案: