如何解决响应式加载器只返回一个数据 url
我正在尝试在我的 vue/node 项目中使用 responsive-loader,但它只返回一个数据 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'),}
解决方法
您正在为图像添加新规则,但 Vue CLI 生成/管理的项目已经具有图像规则,并且此规则具有优先级,因为它是第一个添加的
您可以通过查看 the code 或运行 vue inspect
命令并检查输出来找到默认规则。
Here 是有关如何删除原始 images
规则的文档
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。