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

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

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

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

您必须安装一个webpack加载器以在构建任务上调整图像大小，然后将其注入srcSet从Nuxt.js生成的html中

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

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