Как изменить размер изображения для разных адаптивных просмотров?

Я создал сайт с nuxt.js и начальной загрузкой. Для отзывчивых просмотров мне нужно создавать изображения разных размеров. Nuxt.js не может изменить размеры изображений. Как ты это делаешь?

Источник

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">
Источник

Если вы не хотите полагаться на веб-пакет для быстрой загрузки изображений, попробуйте этот модуль 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.

Вы должны установить загрузчик веб-пакетов, чтобы изменить размер ваших изображений в задаче сборки, и это добавит srcSet в вашем HTML, сгенерированном из Nuxt.js

например. responsive-loader https://github.com/herrstucki/responsive-loader

О Nuxt.js и конфигурации веб-пакетов: https://nuxtjs.org/faq/extend-webpack

Источник
Другие вопросы по тегам