QImg работа с изображениями

QImg — это компонент Quasar, предназначенный для удобного отображения изображений с расширенными возможностями, такими как автоматическая подгрузка, обработка ошибок, управление размерами и эффектами. Он является высокоуровневым инструментом, который упрощает работу с изображениями в приложениях на Vue.js с использованием Quasar Framework.

Основные свойства QImg

  • src — путь к изображению. Может быть локальным или внешним URL. Обязательное свойство.

    <q-img src="statics/example.jpg" />

  • alt — альтернативный текст для изображения. Важен для SEO и доступности.

    <q-img src="statics/example.jpg" alt="Пример изображения" />

  • ratio — соотношение сторон изображения (например, "16/9", "1"). Если не задано, QImg будет подстраиваться под реальный размер изображения.

    <q-img src="statics/example.jpg" ratio="16/9" />

  • width и height — фиксированные размеры. Можно использовать числовые значения или строки с единицами измерения.

    <q-img src="statics/example.jpg" width="200px" height="150px" />

  • contain и cover — управление масштабированием изображения:

    • contain — изображение полностью помещается в заданный контейнер без обрезки.
    • cover — изображение заполняет контейнер, обрезая лишние части, сохраняя центр.
    <q-img src="statics/example.jpg" contain />
<q-img src="statics/example.jpg" cover />

Поддержка placeholder и спиннера

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

  • spinner-color — цвет спиннера загрузки.
  • delay — задержка перед показом спиннера.
  • placeholder-src — изображение, отображаемое до полной загрузки основного изображения.

Пример:

<q-img
  src="https://example.com/photo.jpg"
  placeholder-src="statics/placeholder.png"
  spinner-color="primary"
  :delay="200"
/>

Обработка ошибок

QImg позволяет задавать изображение для отображения при ошибке загрузки:

  • error-src — путь к изображению, которое показывается при ошибке.
  • @error — событие, которое можно использовать для кастомной обработки.

Пример:

<q-img
  src="https://example.com/nonexistent.jpg"
  error-src="statics/error.png"
  @error="handleError"
/>
methods: {
  handleError(evt) {
    console.log('Ошибка загрузки изображения', evt);
  }
}

Слоты QImg

QImg поддерживает слоты для кастомизации отображения:

  • default — основной слот, может использоваться для наложения контента поверх изображения.
  • loading — слот для отображения кастомного индикатора загрузки.
  • error — слот для отображения кастомного сообщения при ошибке.

Пример с наложением текста:

<q-img src="statics/example.jpg">
  <div class="absolute-bottom text-white bg-black bg-opacity-50 q-pa-xs">
    Подпись изображения
  </div>
</q-img>

Lazy loading

QImg поддерживает ленивую загрузку через свойство lazy-src, которое работает совместно с placeholder-src. Это позволяет экономить трафик и ускоряет первоначальную загрузку страницы:

<q-img
  src="https://example.com/photo.jpg"
  lazy-src="statics/placeholder.png"
/>

Анимации и эффекты

QImg можно сочетать с классами Quasar для создания эффектов:

  • transition — плавное появление изображения.
  • opacity — анимация прозрачности при загрузке.

Пример:

<q-img
  src="statics/example.jpg"
  class="q-transition--fade"
  style="transition-duration: 0.5s"
/>

Важные рекомендации

  • Для больших изображений рекомендуется использовать ratio и contain/cover для корректного отображения в разных устройствах.
  • Всегда задавать alt для доступности и SEO.
  • Использование placeholder-src и error-src повышает пользовательский опыт.
  • Lazy loading снижает нагрузку на сеть при множественных изображениях на странице.

QImg является мощным и гибким инструментом для работы с изображениями в Quasar, позволяя легко управлять отображением, масштабированием, анимацией и обработкой ошибок.

Оглавление