responsive-loader only returns 一个数据 url

Question

我正在尝试在我的 vue/node 项目中使用 responsive-loader，但它只有 returns 一个数据 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 的项目 generated/managed 已经有图像规则，并且此规则具有优先权，因为它是第一个添加的

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

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

responsive-loader only returns 一个数据 url

responsive-loader only returns a data url

webpack

vue.js

responsive-images

vue-cli

responsive-loader

更新