响应加载程序只返回一个数据url

Question

我试图在我的vue/node项目中使用响应加载程序，但它只返回一个数据url。

我安装了

npm install responsive-loader sharp --save-dev

这是我的vue.config.js

module.exports = {
chainWebpack: config => {
config.module
.rule('responsive')
.test(/.(jpe?g|png|webp)$/i)
.use('responsive-loader')
.loader('responsive-loader')
.tap(() => {
return {
adapter: require('responsive-loader/sharp'),
}
})
},
}

在我的一个组件中，我有

let responsiveImage = require('../assets/image.jpg')
console.log(responsiveImage)

日志语句的输出是一个白色小正方形的数据url图像：

data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSB7CiAgICAgICAgICBzcmNTZXQ6IF9fd2VicGFja19wdWJsaWNfcGF0aF9fICsgIjNiOTFlYjAwY2E1OGU0MTkzMGY5OGY5ZGZkMDc3YTVmLTc4MC5qcGciKyIgNzgwdyIsCiAgICAgICAgICBpbWFnZXM6WyB7cGF0aDogX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiM2I5MWViMDBjYTU4ZTQxOTMwZjk4ZjlkZmQwNzdhNWYtNzgwLmpwZyIsd2lkdGg6IDc4MCxoZWlnaHQ6IDEwOTd9XSwKICAgICAgICAgIHNyYzogX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiM2I5MWViMDBjYTU4ZTQxOTMwZjk4ZjlkZmQwNzdhNWYtNzgwLmpwZyIsCiAgICAgICAgICB0b1N0cmluZzpmdW5jdGlvbigpe3JldHVybiBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIzYjkxZWIwMGNhNThlNDE5MzBmOThmOWRmZDA3N2E1Zi03ODAuanBnIn0sCiAgICAgICAgICAKICAgICAgICAgIHdpZHRoOiA3ODAsCiAgICAgICAgICBoZWlnaHQ6IDEwOTcKICAgICAgICB9)

我期望它是一个具有src和其他一些性质的对象。

为什么它不加载我的图像？

更新

问题是(正如我的Michael Levy所提到的(，我的规则从未达到，因为所有图像的现有规则都是第一位的。为了解决这个问题，我在规则中添加了.before('images')，所以它会先检查我的规则。

另一个问题是，由于某种原因，npm在我没有注意到的情况下将我的vue-cli更改为3.x版本。正因为如此，我得到了一个错误，.before()不是一个函数。在运行vue upgrade并更改为4.x版本后，它开始工作。

我还添加了.resourceQuery(/srcset/)，所以它只会影响我特别想要的图像。

我的新vue.config.js

module.exports = {
chainWebpack: config => {
config.module
.rule('responsive')
.before('images')
.test(/.(jpe?g|png|webp)$/i)
// if the import url looks like "some.png?srcset..."
.resourceQuery(/srcset/)
.use('responsive-loader')
.loader('responsive-loader')
.tap(() => {
return {
adapter: require('responsive-loader/sharp'),
}
})
},
}

Answer 1

您正在为映像添加新规则，但Vue CLI生成/管理的项目已经有了映像规则，并且此规则在添加第一个时具有优先级

您可以通过查看代码或运行vue inspect命令并检查输出来找到默认规则。

以下是关于如何删除原始images规则的文档