如何为不同的响应视图调整图像大小？

Question

我使用nuxt.js和bootstrap创建了一个站点。对于响应式视图，我需要创建不同的图像尺寸。Nuxt.js无法调整图像大小。你怎么做到这一点？

Answer 1

现在我有了解决方案。安装responsive-loader和sharp。

修改nuxt.config.js并在下面添加代码build: {}：

build: {
  /*
  ** Run ESLint on save
  */
  extend (config, { isDev, isClient }) {

    // Default block
    if (isDev && isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }
    // Default block end


    // here I tell webpack not to include jpgs and pngs
    // as base64 as an inline image
    config.module.rules.find(
      rule => rule.loader === "url-loader"
    ).exclude = /\.(jpe?g|png)$/;

    // now i configure the responsive-loader
    config.module.rules.push({
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader',
        options: {
            min: 575,
            max: 1140,
            steps: 7,
            placeholder: false,
            quality: 60,
            adapter: require("responsive-loader/sharp")
        }
    })

  }
}

现在，您可以使用以下代码显示图像

<img :src="require('~/assets/images/Foo.jpg?size=400')" :srcset="require('~/assets/images/Foo.jpg').srcSet">