Question

我尝试在我的html模板中添加一些bg-image，但它不是渲染。我搜索了互联网，webpack和角度文档的解决方案，但是找不到合适的解决方案。

我的webpack配置使用文件加载器来显示图像：

 module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader', 
                'angular2-template-loader'
            ]
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap'})
        },
        {
            test: /\.less$/,
            exclude: /node_modules/,
            loader: 'raw-loader!less-loader'
        }
    ]
},

我的模板如下：

<div class="hero" 
     [ngStyle]="{'background-image':url(../../assets/img/1.jpg)'}">
    <div class="container">

    </div>
</div>

<div class="row">
    <div class="col-sm-7">
        <h2 class="bg-primary filter-titles ">Choose location and criteria</h2>

        <main-search-filter></main-search-filter>
    </div>

    <div class="col-sm-5">
        <a class="btn btn-primary filter-titles" href="#">Near you</a>

        <search-map></search-map>
    </div>
</div>

Answer 1

您需要提供图片。

1）在hero组件中，您可以添加：

loadImage(image: string) {
    return require('../public/images/' + image);
}

注意：../public/images应指向项目的images容器文件夹。

2）模板：

[ngStyle]="{'background-image': 'url(' + loadImage('1.jpg') + ')'}"

角度2背景图像webpack 2

1 个答案: