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

Question

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

Answer 1

这不是 Nuxt 的任务，而是 Webpack 的任务。

你必须安装一个 webpack 加载器来调整构建任务中的图像大小，这将在你的 html 中注入 srcSet 从 Nuxt.js

生成

例如。 responsive-loaderhttps://github.com/herrstucki/responsive-loader

关于Nuxt.js&webpack配置：https://nuxtjs.org/faq/extend-webpack

Answer 2

如果你不想依赖 webpack 响应式加载图片，你可能想试试这个 nuxt 模块：https://github.com/reallifedigital/nuxt-image-loader-module

此模块的缺点是它目前不支持 srcset 并且需要在本地安装 Graphicsmagick 库。好处是 Graphicsmagick 中可用的任何东西（明智的图像处理）都可以用来处理你的图像。此外，您可以按照说明实施您自己的图像 srcset 并实施您的图像标签，如下所示：

<img src="image.png" srcset="image-1x.png?style=1x 1x, image-2x.png?style=2x 2x alt="" />

您应该能够通过这种方式实现任何响应式图像。

对于我们在 nuxt 中的响应式视图，例如 'feed' 的最新内容，我们希望使用主要文章中使用的较小图像，因此该模块完全符合我们的需要.

披露：我编写此模块是为了解决我们特定的响应要求，根据原始发布者的描述，这听起来有很多重叠。

Answer 3

现在我有了解决方案。安装 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">

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

How to resize images for different responsive views?

image-resizing

nuxt.js