Изображения v-img

Компонент v-img в Vuetify используется для отображения изображений с возможностью управления их размером, масштабированием, положением и эффектами загрузки. Он обеспечивает адаптивное отображение и корректную обработку ошибок при загрузке изображений, что особенно важно для динамических интерфейсов.

Базовое использование выглядит следующим образом:

<v-img
  src="https://example.com/image.jpg"
  alt="Описание изображения"
></v-img>
  • src — путь к изображению, может быть локальным или внешним URL.
  • alt — альтернативный текст для доступности и SEO.

Компонент автоматически масштабирует изображение под контейнер, сохраняя пропорции.

Настройка размеров

v-img поддерживает фиксированные и адаптивные размеры:

<v-img
  src="https://example.com/image.jpg"
  width="300"
  height="200"
></v-img>
  • width и height могут задаваться в пикселях, процентах или с помощью CSS-классов Vuetify (ma-4, pa-2, d-flex, и т.д.).
  • Использование contain и cover через свойство contain управляет способом заполнения контейнера:
<v-img
  src="https://example.com/image.jpg"
  contain
  width="400"
  height="300"
></v-img>
  • contain сохраняет все изображение в контейнере, может оставлять пустое пространство.
  • По умолчанию используется cover, изображение обрезается по краям, но полностью заполняет контейнер.

Подключение эффектов и фильтров

v-img поддерживает плавную загрузку и обработку ошибок. Для этого используются слоты:

  • placeholder — отображается до полной загрузки изображения.
  • error — отображается при невозможности загрузки.

Пример:

<v-img src="https://example.com/image.jpg">
  <template #placeholder>
    <v-row class="fill-height ma-0" align="center" justify="center">
      <v-progress-circular indeterminate color="primary"></v-progress-circular>
    </v-row>
  </template>
  <template #error>
    <v-row class="fill-height ma-0" align="center" justify="center">
      <v-icon color="red">mdi-alert-circle</v-icon>
    </v-row>
  </template>
</v-img>
  • placeholder может содержать любой компонент Vuetify, например, индикатор загрузки.
  • error позволяет показать пользовательскую ошибку или альтернативное изображение.

Кроппинг и позиционирование

Компонент поддерживает выравнивание изображения внутри контейнера с помощью свойства position. Оно принимает CSS-подобные значения, например:

<v-img
  src="https://example.com/image.jpg"
  height="300"
  position="top center"
></v-img>
  • top, bottom, center, left, right управляют точкой привязки изображения.
  • В сочетании с cover изображение будет обрезаться относительно указанной позиции.

Работа с градиентами и оверлеями

v-img можно использовать для создания визуально богатых фонов с градиентами или наложением текста:

<v-img
  src="https://example.com/image.jpg"
  height="400"
>
  <v-container fill-height>
    <v-row align="center" justify="center">
      <v-col class="text-center">
        <div class="white--text font-weight-bold text-h4">Заголовок на изображении</div>
      </v-col>
    </v-row>
  </v-container>
  <template #gradient>
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7))
  </template>
</v-img>
  • #gradient позволяет наложить линейный или радиальный градиент поверх изображения.
  • Текст и компоненты внутри v-img остаются интерактивными, благодаря слоту содержимого.

Поддержка lazy loading и оптимизация

Компонент поддерживает ленивую загрузку через атрибут lazy-src, что важно для производительности при работе с большим количеством изображений:

<v-img
  src="https://example.com/high-res.jpg"
  lazy-src="https://example.com/low-res.jpg"
  aspect-ratio="16/9"
></v-img>
  • lazy-src — предварительное изображение низкого разрешения.
  • aspect-ratio сохраняет пропорции контейнера до полной загрузки изображения, предотвращая “прыжки” контента.

Работа с пропорциями и обрезкой

Свойство aspect-ratio позволяет задать отношение ширины к высоте контейнера, независимо от размеров исходного изображения:

<v-img
  src="https://example.com/image.jpg"
  aspect-ratio="4/3"
></v-img>
  • Значение указывается в виде дроби или числа (например, 1.5 для 3:2).
  • Обеспечивает стабильный макет при динамическом контенте, особенно в сетках и карточках.

Комбинирование с другими компонентами Vuetify

v-img часто используется внутри v-card, v-carousel или v-sheet:

<v-card max-width="400">
  <v-img
    src="https://example.com/image.jpg"
    height="200"
  ></v-img>
  <v-card-title>Карточка с изображением</v-card-title>
  <v-card-text>
    Пример текста, который сопровождает изображение.
  </v-card-text>
</v-card>
  • Обеспечивает единообразный визуальный стиль.
  • Поддерживает все эффекты Vuetify — тени, ряды и сетки, а также реактивность.

Интерактивные изображения

Можно делать изображения кликабельными или с эффектами наведения:

<v-img
  src="https://example.com/image.jpg"
  class="hover-scale-transition"
  @click="handleClick"
></v-img>
  • CSS-классы Vuetify (hover-scale-transition, elevation-3, rounded-lg) добавляют визуальные эффекты.
  • Обработчики событий (@click, @mouseenter) делают компонент интерактивным.

v-img является универсальным инструментом для работы с изображениями в Vuetify, позволяя создавать адаптивные, интерактивные и визуально привлекательные интерфейсы без сложных решений на чистом CSS и JS.

Оглавление