[英]Webpack: load images from inline style (background-image)
我在使用 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]']
}
]
},
如果有人可以帮助我解决这个问题,我将不胜感激。
您可能需要启用插值标志的“ html”文件:
require("html-loader?interpolate!./your-file.html");
...然后需要您的内联样式背景图像,例如:
<div style="background-image: url('${require(`../../content/images/logo.png`)}')">
自己在谷歌上搜索解决方案,并决定制作一个装载机。 https://github.com/apotap2/url-replace-loader它只有 20 行代码 :D 它只是用 require() 替换了每个“url(.*)”,这样你就可以将它与文件加载器一起使用。 如果您需要更复杂的逻辑,似乎自己制作加载器会更快。
其他解决方案是(如果您不想使用插值标志)
$scope.imageToUse = require(`../../content/images/logo.png`)
在你的控制器中
并直接在您的后台使用: url({{imageToUse }})
在内部,webpack 会将图像编码为 base64,并将其分配给 imageToUse 变量,该变量将呈现到您的 html 页面。
在 webpack 5 上,正确的答案是使用你的html-loader
。
更改内联样式:
## Heading ##<div background-image="../../content/images/logo.png">
和你的html-loader
:
{
test: /\.html$/i,
loader: 'html-loader',
options: {
minimize: true,
attributes: {
list: [
'...',// All default supported tags and attributes
{
tag: 'div',
attribute: 'data-background',
type: 'src',
}
]
}
}
}
在这里了解更多详情。
对我来说,最直接的解决方案是在 Webpack 中使用interpolate
选项,如本答案所述。
{
test: /\.(html)$/,
include: path.join(__dirname, 'src/views'),
use: {
loader: 'html-loader',
options: {
interpolate: true
}
}
}
然后在你的 HTML 中
<div style="background-image: url('${require('../../content/images/logo.png')')">
非常基本的只是:
<div class="background-design-element" style="background-image: url('<%= require('./../assets/images/test.jpg') %>')"></div>
关键是要记住:<%==%> 其实可以这么简单 - :-)
1.0.0
删除interpolate
选项在此处查看更改日志: https ://github.com/webpack-contrib/html-loader/blob/master/CHANGELOG.md
从1.0.0
,删除了interpolate
选项,因此不再可以使用url('{require(...)}')
。
我现在采取的替代方法是使用CopyWebpackPlugin
将所有背景图像源克隆到dist
(输出)文件夹中,并使用相对路径获取 html 中的源文件。
<div style="background-image:url('../assets/images/xx.png')">
但是使用这种方式你也会失去那些背景图像源的tree-shaking,实际上不可能在url()中使用源别名,所以它只是一种临时方式:(
const CopyPlugin = require('copy-webpack-plugin'); ... plugins: [ ..., new CopyPlugin( { patterns: [ ... { from: 'src/assets/images/background-image', to: 'assets/images/background-image', } ] } ) ]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.