Как проверить загружается ли изображение?

В Vue.js можно проверить, загружается ли изображение, используя событие onload на теге <img>. Событие onload срабатывает, когда изображение полностью загружено.

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

<template>
  <div>
    <img :src="imageUrl" @load="imageLoaded = true" @error="imageError = true">
  
    <div v-if="!imageLoaded && !imageError">
      Изображение загружается...
    </div>
  
    <div v-if="imageError">
      Ошибка загрузки изображения.
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'путь_к_изображению',
      imageLoaded: false,
      imageError: false
    }
  }
}
</script>

В этом примере мы привязываем свойство imageUrl к атрибуту src тега <img>. Затем мы отслеживаем событие @load, которое устанавливает свойство imageLoaded в true, когда изображение загружено успешно. Также мы отслеживаем событие @error, которое устанавливает свойство imageError в true, если возникает ошибка загрузки изображения.

В шаблоне мы используем директиву v-if для отображения соответствующего содержимого в зависимости от состояния загрузки изображения. Если изображение все еще загружается (!imageLoaded && !imageError), мы показываем сообщение "Изображение загружается...". Если возникла ошибка загрузки изображения (imageError), мы показываем сообщение "Ошибка загрузки изображения".

Таким образом, с помощью событий @load и @error, мы можем проверить, загружается ли изображение в Vue.js.