响应式加载器只返回一个数据 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 规则的文档