Question

我正在通过创建自己的项目来学习，目前正在设计自己的MEAN-stack应用程序。该应用程序使用Webpack，过去我无法显示任何图像。然后，我安装了URL加载程序，现在当我在img元素的src属性中输入本地URL时，便可以显示图像。

但是，现在我正在尝试将本地图像用于SCSS中的background-image属性，但它根本没有显示。下面的代码显示了SCSS代码，HTML代码以及Webpack文件中包含的内容。我该怎么做才能解决此问题？

SCSS文件：profile-nav.component.SCSS

@import "../../SASS/abstracts/variables";
@import "../../SASS/abstracts/mixins";

.img-container {
  height: 33.3333vh;
  position: relative;
  background-image: url("../../images/slytherin-logo.jpg");
  background-size: cover;

  img {
    border-radius: 50%;
    @include center-horizontal-vertical;
    height: 80%;
    width: 25%;


  }
}

HTML文件：profile-nav.component.html。我可以显示img图片，但不能显示我在SCSS文件中输入的背景图片

<div class="img-container">
    <img src="../../images/profile_picture.jpg" alt="jooo">
</div>

Webpack：webpack.config.ts

var webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        'app': './assets/app/main.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.css$/,
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { limit: 40000 }
                    },
                    'image-webpack-loader'
                ]
            }
        ],
        exprContextCritical: false
    }
};

编辑，这是我的webpack.config文件经过调整后的样子

var webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        'app': './assets/app/main.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader' ] // <------
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'] // <-----
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    'file-loader'
                    'image-webpack-loader'
                ]
            }
        ],
        exprContextCritical: false
    }
};

Answer 1

您缺少一些装载机：

rules: [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader' ] // <------
            },
            {
                test: /\.scss$/, 
                use: ['style-loader', 'css-loader', 'sass-loader'] // <-----
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { limit: 40000 }
                    },
                    'image-webpack-loader'
                ]
            }
        ],

带有Webpack的平均堆栈应用程序：无法显示具有CSS background-image属性的图像

1 个答案: