【问题标题】：responsive-loader only returns a data urlresponsive-loader 只返回一个数据 url
【发布时间】：2021-09-18 10:51:18
【问题描述】：

我试图在我的 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.js webpack vue-cli responsive-images responsive-loader

【解决方案1】：

您正在为图像添加新规则，但由 Vue CLI 生成/管理的项目已经具有图像规则，并且该规则具有优先级，因为它是第一个添加的

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

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

【讨论】：