我在使用 webpack 加载图像时遇到问题。
当我在 html 页面上使用图像标签时，一切正常:
<img src="../../content/images/logo.png">
但我也需要使用内联样式:
<div style="background-image: url('../../content/images/logo.png')">
在这种情况下，webpack 不会解析图像并将字符串留在
url() 中。原封不动。网络包配置:
module: {
rules: [
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
{
test: /\.ts$/,
loaders: [
'angular2-template-loader',
'awesome-typescript-loader'
],
exclude: ['node_modules/generator-jhipster']
},
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true,
caseSensitive: true,
removeAttributeQuotes:false,
minifyJS:false,
minifyCSS:false
},
exclude: ['./src/main/webapp/index.html']
},
{
test: /\.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: /(vendor\.scss|global\.scss)/
},
{
test: /(vendor\.scss|global\.scss)/,
loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader'],
exclude: /(vendor\.css|global\.css)/
},
{
test: /(vendor\.css|global\.css)/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
loaders: ['file-loader?hash=sha512&digest=hex&name=/images/[hash].[ext]']
}
]
},
如果有人可以帮助我解决这个问题，我将不胜感激。
最佳答案
您可能需要带有 interpolation flag enabled 的“html”文件:
require("html-loader?interpolate!./your-file.html");
...然后需要您的内联样式背景图像，例如:
<div style="background-image: url('${require(`../../content/images/logo.png`)}')">
关于javascript - Webpack:从内联样式加载图像(背景图像)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44096749/