如何调整图像大小以适应不同的响应视图? [英] How to resize images for different responsive views?

问题描述

我用 nuxt.js 和

I created a site with nuxt.js and bootstrap. For the responsive views i need to create different image sizes. Nuxt.js can't resize images. How do you do this?

推荐答案

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

Now I have the solution. Install responsive-loader and 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")
        }
    })

  }
}

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

Now you can use the following code to display images

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

这篇关于如何调整图像大小以适应不同的响应视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！