Изображение

Документация и примеры для выбора изображений (через компонент <b-img>) в адаптивное поведение (чтобы они никогда не становились больше, чем их родительские элементы), при необходимости добавляя к ним облегченные стили - все через свойства.

Компоненты изображений BootstrapVue поддерживают округленные изображения, стили миниатюр, выравнивание и даже возможность создавать пустые изображения с дополнительным сплошным цветом фона. Поддержка отложенных изображений доступна через дополнительный компонент <b-img-lazy>.

Разрешение изображения src

Свойство src (и свойство blank-src из <b-img-lazy>), из коробки работает только с абсолютными или полностью определенными URL-адресами доменного имени. Если вы используете ресурсы проекта в качестве источников изображений, обратитесь к Component img src resolving для настройки vue-loader, чтобы понять свойства пользовательских компонентов, которые определяют источники изображений.

Стилизация изображений

Для стилизации визуализированного элемента изображения доступно несколько свойств. В следующих подразделах рассматриваются различные варианты.

Адаптивные изображения

Изображения в BootstrapVue можно сделать адаптивными с помощью свойства fluid (которое устанавливает max-width: 100%; height: auto; через классы CSS), чтобы оно масштабировалось вместе с родительским элементом - до максимальной собственной ширины изображение.

<div>
  <b-img src="https://picsum.photos/1024/400/?image=41" fluid alt="Адаптивное изображение"></b-img>
</div>

<!-- b-img-fluid.vue -->

Чтобы создать плавное изображение, которое будет расти до ширины своего контейнера, используйте свойство fluid-grow. Обратите внимание, что это может вызвать размытие небольших растровых изображений.

<div>
  <h5>Маленькое изображение с <code>fluid</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid alt="Изображение Fluid"></b-img>

  <h5 class="my-3">Маленькое изображение с <code>fluid-grow</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid-grow alt="Изображение Fluid-grow"></b-img>
</div>

<!-- b-img-fluid-grow.vue -->

Используйте свойство block, чтобы изображение отображалось как блочный элемент, а не как встроенный в браузере элемент встроенного блока по умолчанию.

Примечание: В Internet Explorer 10, изображения SVG с fluid имеют непропорционально большой размер. Чтобы исправить это, добавьте стиль width: 100% \9; там, где это необходимо. Это исправление неправильно изменяет размер других форматов изображений, поэтому Bootstrap v4 не применяет его автоматически.

Эскизы изображений

Вы можете использовать свойство thumbnail, чтобы придать изображению округлую светлую границу.

<b-container fluid class="p-4 bg-dark">
  <b-row>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Изображение 1"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Изображение 2"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Изображение 3"></b-img>
    </b-col>
  </b-row>
</b-container>

<!-- b-img-thumbnail.vue -->

Закругленные углы

Вы можете контролировать, какие углы будут скруглены, установив для закругленной опоры одно из следующих значений:

true (или свойство присутствует без значения): закруглить все углы
false (или свойство отсутствует): без явного закругления или углов (по умолчанию)
'top': закруглить верхние углы
'right': закруглить правые углы
'bottom': закруглить нижние углы
'left': закруглить левые углы
'circle': образует круг (если изображение квадратное) или овальную (если не квадратную) границу
'0': явно отключить скругление углов

<template>
  <div>
    <b-img v-bind="mainProps" rounded alt="Закругленное изображение"></b-img>
    <b-img v-bind="mainProps" rounded="top" alt="Закругленное сверху изображение"></b-img>
    <b-img v-bind="mainProps" rounded="right" alt="Закругленное справа изображение"></b-img>
    <b-img v-bind="mainProps" rounded="bottom" alt="Закругленное снизу изображение"></b-img>
    <b-img v-bind="mainProps" rounded="left" alt="Закругленное слева изображение"></b-img>
    <b-img v-bind="mainProps" rounded="circle" alt="Круглое изображение"></b-img>
    <b-img v-bind="mainProps" rounded="0" alt="Не округленное изображение"></b-img>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: { blank: true, blankColor: '#777', width: 75, height: 75, class: 'm1' }
      }
    }
  }
</script>

<!-- b-img-rounded.vue -->

Выравнивание изображений

Выровняйте изображения с помощью логических свойств left (смещается влево) right(смещается вправо) и center (автоматически влево + правые поля). Вы также можете центрировать изображения, помещая их в контейнер с классом text-center.

С выравниванием по левому и правому краю (с плавающей точкой):

<div class="clearfix">
  <b-img left src="https://picsum.photos/125/125/?image=58" alt="Изображение слева"></b-img>
  <b-img right src="https://picsum.photos/125/125/?image=58" alt="Изображение справа"></b-img>
</div>

<!-- b-img-left-right.vue -->

По центру (блочное):

<div>
  <b-img center src="https://picsum.photos/125/125/?image=58" alt="Изображение по центру"></b-img>
</div>

<!-- b-img-center.vue -->

Примечание: left имеет приоритет перед right, которое имеет приоритет перед center.

Пустые (или сплошные) изображения

<b-img> обеспечивает встроенную поддержку для создания пустых изображений (по умолчанию прозрачных) любой ширины и высоты, путем установки свойства blank и указания значений width и height (в пикселях). Вы можете применить любой из других свойств <b-img>, чтобы изменить стиль/поведение сгенерированного изображения.

Используйте свойство blank-color, чтобы установить цвет пустого изображения. Свойство blank-color может принимать любое значение цвета CSS:

Именованные цвета - например, orange или blue
Шестнадцатеричные цвета - например, #FF9E2C
Цвета RGB и RGBa - например, rgb(255, 158, 44) и rgba(255, 158, 44, .5)
Цвета HSL и HSLa - например, hsl(32, 100%, 59%) и hsla(32, 100%, 59%, .5)

По умолчанию blank-color является transparent.

<template>
  <div>
    <b-img v-bind="mainProps" alt="Прозрачное изображение"></b-img>
    <b-img v-bind="mainProps" blank-color="#777" alt="Сокращенное цветное изображение HEX (#777)"></b-img>
    <b-img v-bind="mainProps" blank-color="red" alt="Именованное цветное изображение (red)"></b-img>
    <b-img v-bind="mainProps" blank-color="black" alt="Именованное цветное изображение (black)"></b-img>
    <b-img v-bind="mainProps" blank-color="#338833" alt="Цветное изображение HEX"></b-img>
    <b-img v-bind="mainProps" blank-color="rgba(128, 255, 255, 0.5)" alt="Цветное изображение RGBa"></b-img>
    <b-img v-bind="mainProps" blank-color="#88f" alt="Сокращенный цвет HEX (#88f)"></b-img>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: { blank: true, width: 75, height: 75, class: 'm1' }
      }
    }
  }
</script>

<!-- b-img-blank.vue -->

Примечания:

В режиме пустого изображения, если установлена только одна из ширины или высоты, для изображения будет установлено одинаковое значение для ширины и высоты.
В режиме пустого изображения, если ширина и высота не заданы, ширина и высота будут внутренне установлены на 1.
Свойство blank имеет приоритет перед свойством src. Если вы установите оба параметра, а затем установите blank в значение false, тогда будет отображаться изображение, указанное в src.
Пустые изображения отображаются с использованием URL-адресов данных изображения SVG.
Свойства width и height также будут применять атрибуты width и height к отображаемому тегу <img>, даже если blank не установлен.

Поддержка `srcset`

<b-img> поддерживает атрибуты srcset и sizes на изображениях. Свойства принимают либо строковое значение, либо массив строк (массив строк будет преобразован в одну строку, разделенную запятыми).

Подробнее об использовании этих атрибутов смотрите в руководстве Адаптивные изображения MDN.

Примечания:

Если задано свойство blank, то свойства srcset и sizes игнорируются
IE 11 не поддерживает srcset и sizes, поэтому убедитесь, что у вас есть значение для свойства src
Vue-loader не поддерживает относительные URL-адреса проекта (URL-адреса ресурсов) в атрибуте srcset. Вместо этого используйте require(...) для разрешения отдельных путей URL. Будьте осторожны при создании строки URI данных, которая длиннее, чем поддерживается максимальной длиной значения атрибута браузера. Если в вашей конфигурации веб-пакета есть ограничение для url-loader, и вы хотите запретить встроенные URL-адреса данных, вам, возможно, придется перезаписать ограничения загрузчика: require('!!url-loader?limit=0!./assets/photo.jpg')
Поддержка srcset и sizes была добавлена в выпуске 2.1.0

Отложенная загрузка изображений

Используйте наш дополнительный компонент изображения <b-img-lazy> (основанный на <b-img>) для отложенной загрузки изображений, когда они прокручиваются в область просмотра (или в пределах пикселей offset в области просмотра).

При отложенной загрузке изображений используется IntersectionObserver, если это поддерживается браузером (или через полифил), чтобы определить, когда изображение должно быть показано. Если поддержка IntersectionObserver не обнаружена, то изображение будет всегда отображаться.

Использование

Установите свойство src на URL-адрес изображения, которое вы хотите лениво загружать, и либо укажите URL-адрес изображения-заполнителя через свойство blank-src, либо создайте для вас пустое изображение-заполнитель, оставив blank-src как null.

Укажите ширину и высоту заполнителя с помощью свойств blank-width и blank-height. Если эти свойства не установлены, они вернутся к свойствам width и height (которые применяются к изображению, указанному через src).

Управляйте цветом сгенерированного пустого изображения, установив свойство blank-color.

Изображения-заполнители (явно предоставленные или генерируемые динамически) должны иметь те же значения ширины и высоты или, по крайней мере, такое же соотношение сторон, что и изображение src.

Не стесняйтесь использовать свойства fluid, fluid-grow, thumbnail и rounded для <b-img>.

Свойство offset prop specifies the number of pixels that an image needs to be near to the viewport to trigger it to be shown. The default value is 360.

Свойство throttle контролирует, как долго (в мс) после события scroll (или resize, или orientationchange, или transitionend) происходит до проверки, попало ли изображение в поле зрения (или в пределах просмотра offset). По умолчанию 100 (ms). throttle не действует, если обнаружена поддержка IntersectionObserver.

Как только изображение появится в поле зрения и отобразится, прослушиватели событий и/или наблюдатель пересечения удаляются.

Пример использования:

<template>
  <div>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(80)" alt="Изображение 1"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(82)" alt="Изображение 2"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(84)" alt="Изображение 3"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(85)" alt="Изображение 4"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(88)" alt="Изображение 5"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(90)" alt="Изображение 6"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(92)" alt="Изображение 7"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(94)" alt="Изображение 8"></b-img-lazy>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: {
          center: true,
          fluidGrow: true,
          blank: true,
          blankColor: '#bbb',
          width: 600,
          height: 400,
          class: 'my-5'
        }
      }
    },
    methods: {
      getImageUrl(imageId) {
        const { width, height } = this.mainProps
        return `https://picsum.photos/${width}/${height}/?image=${imageId}`
      }
    }
  }
</script>

<!-- b-img-lazy.vue -->

Принудительно показать отложено загруженное изображение

Чтобы принудительно показать финальное изображение, установите для свойства show значение true. Свойство show поддерживает модификатор Vue .sync и будет обновлена до true, когда будет показано окончательное изображение.

Поддержка отложенной загрузки `srcset`

<b-img-lazy> поддерживает установку атрибутов srcset и sizes для визуализированного элемента <img>. Эти свойства будут применены к изображению только после того, как оно появится в поле зрения.

Смотрите поддержку srcset выше для подробностей и ограничений использования свойств.

Поддержка srcset и sizes была добавлена в выпуске 2.1.0.

Справочник по компонентам

`<b-img>`

Функциональный компонент

Смотреть источник

<b-img> Свойства

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`alt`	`String`		Значение, устанавливаемое для атрибута `alt`
`blank`	`Boolean`	`false`	Создает пустое/прозрачное изображение через URI данных SVG
`blank-color`	`String`	`'transparent'`	Устанавливает цвет пустого изображения на указанное значение цвета CSS
`block`	`Boolean`	`false`	Заставляет изображение отображаться как блочный элемент, а не как встроенный блочный элемент по умолчанию в браузере
`center`	`Boolean`	`false`	Центрирует изображение по горизонтали
`fluid`	`Boolean`	`false`	Делает изображение отзывчивым. Изображение будет уменьшаться по мере необходимости или увеличиваться по ширине изображения
`fluid-grow`	`Boolean`	`false`	Похож на свойство 'fluid', но позволяет изображению увеличиваться по сравнению с исходной шириной
`height`	`Number` или `String`		Значение, устанавливаемое для атрибута высоты изображения 'height'
`left`	`Boolean`	`false`	При установке перемещает изображение влево
`right`	`Boolean`	`false`	При установке перемещает изображение вправо
`rounded`	`Boolean` или `String`	`false`	Если установлено значение 'true', углы изображения слегка закругляются. Также можно использовать, чтобы отключить закругленные углы или сделать изображение кругом/овалом. Подробности смотрите в документации
`sizes` v2.1.0+	`Array` или `String`		Одна или несколько строк, разделенных запятыми (или массив строк), указывающих набор размеров источника. Необязательно используется в сочетании со свойством srcset.
`src`	`String`		URL для установки значения атрибута `src`
`srcset` v2.1.0+	`Array` или `String`		Одна или несколько строк, разделенных запятыми (или массив строк), указывающих возможные источники изображений для использования пользовательским агентом
`thumbnail`	`Boolean`	`false`	Добавляет рамку эскиза вокруг изображения
`width`	`Number` или `String`		Значение, устанавливаемое для атрибута ширины изображения 'width'

`<b-img-lazy>`

Смотреть источник

<b-img-lazy> Свойства

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`alt`	`String`		Значение, устанавливаемое для атрибута `alt`
`blank-color`	`String`	`'transparent'`	Устанавливает цвет пустого изображения-заполнителя на указанное значение цвета CSS
`blank-height`	`Number` или `String`		Значение, которое нужно установить для атрибута «высота» изображения-заполнителя. По умолчанию значение свойства 'height'
`blank-src`	`String`	`null`	Изображение-заполнитель вместо пустого изображения
`blank-width`	`Number` или `String`		Значение, устанавливаемое для атрибута 'width' изображения заполнителя. По умолчанию значение свойства 'width'
`block`	`Boolean`	`false`	Заставляет изображение отображаться как блочный элемент, а не как встроенный блочный элемент по умолчанию в браузере
`center`	`Boolean`	`false`	Центрирует изображение по горизонтали
`fluid`	`Boolean`	`false`	Делает изображение отзывчивым. Изображение будет уменьшаться по мере необходимости или увеличиваться по ширине изображения
`fluid-grow`	`Boolean`	`false`	Похож на свойство 'fluid', но позволяет изображению увеличиваться по сравнению с исходной шириной
`height`	`Number` или `String`		Значение, устанавливаемое для атрибута высоты изображения 'height'
`left`	`Boolean`	`false`	При установке перемещает изображение влево
`offset`	`Number` или `String`	`360`	Количество пикселей от края области просмотра до загрузки отложенного изображения
`right`	`Boolean`	`false`	При установке перемещает изображение вправо
`rounded`	`Boolean` или `String`	`false`	Если установлено значение 'true', углы изображения слегка закругляются. Также можно использовать, чтобы отключить закругленные углы или сделать изображение кругом/овалом. Подробности смотрите в документации
`show`	`Boolean`	`false`	Если установлено значение true, заставит показывать изображение, указанное через свойство 'src'
`sizes` v2.1.0+	`Array` или `String`		Одна или несколько строк, разделенных запятыми (или массив строк), указывающих набор размеров источника. Необязательно используется в сочетании со свойством srcset.
`src`	`String`		URL для установки значения атрибута `src`
`srcset` v2.1.0+	`Array` или `String`		Одна или несколько строк, разделенных запятыми (или массив строк), указывающих возможные источники изображений для использования пользовательским агентом
`thumbnail`	`Boolean`	`false`	Добавляет рамку эскиза вокруг изображения
`width`	`Number` или `String`		Значение, устанавливаемое для атрибута ширины изображения 'width'

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<b-img>`	`BImg`	`bootstrap-vue`
`<b-img-lazy>`	`BImgLazy`	`bootstrap-vue`

Пример:

import { BImg } from 'bootstrap-vue'
Vue.component('b-img', BImg)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт	Путь импорта
`ImagePlugin`	`bootstrap-vue`

Пример:

import { ImagePlugin } from 'bootstrap-vue'
Vue.use(ImagePlugin)

Разрешение изображения src

Стилизация изображений

Адаптивные изображения

Эскизы изображений

Закругленные углы

Выравнивание изображений

Пустые (или сплошные) изображения

Поддержка srcset

Отложенная загрузка изображений

Использование

Принудительно показать отложено загруженное изображение

Поддержка отложенной загрузки srcset

Справочник по компонентам

Свойства

Свойства

Импорт отдельных компонентов

Импортировать как плагин Vue.js

Поддержка `srcset`

Поддержка отложенной загрузки `srcset`