image-resizing - 如何为不同的响应 View 调整图像大小？

Question

我用 nuxt.js 和 bootstrap 创建了一个站点。对于响应式 View ，我需要创建不同的图像大小。 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">