我希望能够通过webpack显示嵌入式背景图像,但到目前为止,它无法正常工作。在我的 index.html 中,我有 img标记,它们可以在浏览器中正确显示。但是,它不适用于 background-image 。
我还对此链接Webpack: load images from inline style (background-image)中提到的带有插值标志的镜头进行了测试,但是问题仍然存在。这是我的代码,请您给我一些建议以解决此问题?预先感谢。
<section class="intro pt-sm-5 pb-5" style="background-image: url(./assets/img/showcase/header-intro-bg.jpg)">
</section>
const path = require('path');
const common = require('./webpack.common');
const merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/template.html'
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
// options: {
// sourceMap: true
// }
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
data: '@import "./src/scss/variables";',
includePaths: [path.resolve(__dirname, 'src/scss')]
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
include: path.resolve(__dirname, './src/assets/img'),
name: '[name].[hash].[ext]',
outputPath: 'imgs'
}
}
}
]
}
});