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">

Answer 2

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

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

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

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

Answer 3

如果您不想依靠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中的响应式视图（例如最新内容的“提要”），我们希望使用主要文章中使用的较小图像，因此该模块完全可以满足我们的需要。

披露：我写了这个模块来解决我们特殊的响应性要求，考虑到原始海报的描述，听起来好像有很多重叠之处。

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

3 个答案: