Блог

Если вы используете сеточную систему Bootstrap для размещения своих страниц, и у вас есть шесть точек останова:

Пытаюсь ли я настроить размеры nuxt-img в соответствии с размерами столбцов для каждой точки останова? В моем случае я просто использую md столбцы, чтобы все было просто, вот так:

 <div class="container">
    <div class="row>
        <div class="col-md-8>
            <nuxt-img
            provider="cloudinary"
            :src="post.publicId"
            width="2450"
            height="3600"
            class="img-fluid card-img-top"    // <----- 'img-fluid' tells image to take width of its container
            sizes="XXXX" //<--- I am not sure what sizes to put here???
              />
        </div>
        <div class="col-md-4">
            ....etc....
        </div>
    </div>
</div>
 

Может ли кто-нибудь дать некоторые рекомендации о том, как я могу наилучшим образом адаптировать компонент Nuxt-img для столбцов сетки начальной загрузки? Спасибо!

Обновление: Вот тест в песочнице: https://codesandbox.io/s/billowing-butterfly-gi8j6?file=/layouts/default.vue

У меня есть следующие настройки, такие как:

               <nuxt-img
                provider="cloudinary"
                src="117_acy7d3"
                width="431"
                height="600"
                class="figure-img img-fluid card-img-top shadow"
                sizes="sm:576px md:768px lg:992px xl:1200px xxl:1400px"
              />
 

Проверьте вкладку сеть…вы увидите, что даже если вы запустите окно просмотра браузера шириной менее 400 пикселей, браузер все равно, похоже, загружает большую картинку размером 1200×1671:

Обновить

Не уверен в дополнительных оптимизациях, но я добился того, чтобы это работало с этим

 <nuxt-img
  provider="static"
  src="/images/stairs.jpg"
  width="431"
  height="600"
  class="figure-img img-fluid card-img-top shadow"
  sizes="sm:100vw md:50vw lg:400px"
/>
 

Он правильно загружает изображения (в зависимости от их размера/веса), в зависимости от экрана и генерирует их во yarn generate время . Мое репо на github можно найти здесь: https://github.com/kissu/so-debug-nuxt-image

Это отчасти зависит от того, как выглядит ваша страница. Быстрее всего попробовать некоторые варианты 100vw в меньших разрешениях и некоторых абсолютных значениях 600px , как вы обычно делаете, когда делаете что-то отзывчивое.

Переключите свои инструменты разработки и посмотрите, как это отображается с помощью эмулированных значений, примерно так.

Эта документация также может стать хорошей отправной точкой: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

Обратите внимание, что модуль сделает это за вас, это просто для понимания концепции.