我想将一些特定图像显示为 data-uri,而不是链接到图像位置。为此,我使用了 url-loader。
这是我的 HTML(哈巴狗模板):
img.loading(:src="require('@/images/spinner.png?inline')")
以及我的 webpack 相关配置:
{
test: /\.(png|jpg|gif|svg|ico)\?inline$/,
loader: 'url-loader',
options: {
limit: 135000,
name: 'img/[name].[hash].[ext]',
esModule: false
}
},
{
test: /\.(png|jpg|gif|svg|ico)$/,
loader: 'file-loader',
options: {
name: 'img/[name].[hash].[ext]',
esModule: false
},
其他图像可以正常加载,但内联图像却不能。我可以在文件名中使用这些参数吗?
最佳答案
resourceQueries
可能是最好的选择:
{
test: /\.(png|jpg|gif|svg|ico)$/,
resourceQuery: /inline/
loader: 'url-loader',
options: {
limit: 135000,
name: 'img/[name].[hash].[ext]',
esModule: false
}
},
{
test: /\.(png|jpg|gif|svg|ico)$/,
loader: 'file-loader',
options: {
name: 'img/[name].[hash].[ext]',
esModule: false
}
请注意,这两个规则都将被处理为 image.jpg?inline
图像将匹配这两个规则,因此您必须设置单独的 resourceQuery
关于javascript - Webpack模块规则测试: Match files that contain a specific parameter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60569901/