Vue2图片组件（支持懒加载）

<template>
  <div
    ref="imageEl"
    class="custom-image-wrapper"
    :class="{ 'has-loaded': isLoaded }"
  >
    <!-- 始终渲染img元素但控制src -->
    <img
      v-if="actualSrc"
      :src="actualSrc"
      :alt="alt"
      :style="{ objectFit: fit }"
      class="custom-image"
      @load="onImgLoad"
      @error="onImgError"
    />

    <!-- 加载状态 -->
    <div v-if="showLoading" class="loading-placeholder">
      <Loading :size="loadingSize" />
    </div>

    <!-- 错误状态 -->
    <div v-if="hasError" class="error-placeholder">
      <slot name="error">加载错误</slot>
    </div>

    <!-- 空状态 -->
    <div v-if="isEmptySrc" class="empty-placeholder">
      <slot name="error">空</slot>
    </div>
  </div>
</template>

<script>
import { imgUrl } from '@/config' // 引入图片地址
import Loading from '@/components/loading' // 图片加载样式
export default {
  name: 'LazyImage',
  data() {
    return {
      imgUrl, // 图片基础地址
      isLoaded: false, // 判断是否加载完成
      hasError: false, // 判断是否加载失败
      observer: null, // 懒加载监听
      isInViewport: !this.lazy, // 判断是否进入视口 非懒加载默认在视口中
    }
  },
  components: {
    Loading,
  },
  props: {
    // 图片地址
    src: {
      type: String,
      default: '',
    },
    // 描述
    alt: {
      type: String,
      default: '',
    },
    // 图片填充方式
    fit: {
      type: String,
      default: 'cover',
    },
    // 判断是否全路径
    isFullAddress: {
      type: Boolean,
      default: false,
    },
    // 显示加载效果
    showLoadLoading: {
      type: Boolean,
      default: true,
    },
    // 加载效果大小
    loadingSize: {
      type: String,
      default: 'default',
    },
    // 是否懒加载
    lazy: {
      type: Boolean,
      default: false,
    },
    // 懒加载距离
    lazyMargin: {
      type: Number,
      default: 200,
    },
  },
  computed: {
    // 图片地址 如果是完整地址则直接使用，否则拼接图片地址
    fullSrc() {
      return this.isFullAddress ? this.src : `${this.imgUrl}${this.src}`
    },
    // 判断是否有传入图片地址
    hasValidSrc() {
      return Boolean(this.src) && this.src.trim() !== ''
    },
    // 判断是否展示空状态
    isEmptySrc() {
      return !this.hasValidSrc && !this.showLoading && !this.hasError
    },
    // 最终展示地址 如果不是懒加载 或者 还没进入视口 则不展示图片
    actualSrc() {
      if (!this.hasValidSrc) return ''
      return !this.lazy || this.isInViewport ? this.fullSrc : ''
    },
    // 判断是否显示加载状态
    showLoading() {
      return (
        this.hasValidSrc &&
        !this.isLoaded &&
        !this.hasError &&
        this.showLoadLoading
      )
    },
  },
  methods: {
    /**
     * 图片加载完成
     */
    onImgLoad() {
      this.$emit('load')
      this.isLoaded = true
      this.hasError = false
      this.disconnectObserver()
    },
    /**
     * 图片加载失败
     */
    onImgError() {
      this.$emit('error')
      this.hasError = true
      this.isLoaded = true
      this.disconnectObserver()
    },
    /**
     * 监听图片是否进入视口
     */
    initIntersectionObserver() {
      // 不需要观察的情况
      if (
        !this.hasValidSrc ||
        !this.lazy ||
        !window.IntersectionObserver ||
        !this.$refs.imageEl
      ) {
        this.isInViewport = true
        return
      }

      // 已经加载过的不再观察
      if (this.isLoaded || this.hasError) {
        return
      }
      this.observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              this.isInViewport = true
              this.disconnectObserver()
            }
          })
        },
        {
          rootMargin: `${this.lazyMargin}px 0px`,
          threshold: 0,
        }
      )

      this.observer.observe(this.$refs.imageEl)
    },
    /**
     * 销毁图片监听
     */
    disconnectObserver() {
      if (this.observer) {
        this.observer.disconnect()
        this.observer = null
      }
    },
  },
  mounted() {
    this.initIntersectionObserver()
  },
  beforeDestroy() {
    this.disconnectObserver()
  },
}
</script>

<style scoped>
.custom-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.custom-image {
  width: 100%;
  height: 100%;
  transition: opacity 0.8s ease-in-out;
  position: relative;
}

.loading-placeholder,
.error-placeholder,
.empty-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
  z-index: 0;
}

.has-loaded .loading-placeholder {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.has-loaded .custom-image {
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes load {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>