vue实现图片组件

Vue 图片组件的实现方法

基础图片组件实现

创建一个基础的图片组件，支持动态传入图片路径和替代文本。

<template>
  <img :src="src" :alt="alt" :class="className" />
</template>

<script>
export default {
  name: 'BaseImage',
  props: {
    src: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  }
}
</script>

懒加载图片组件

使用Intersection Observer API实现图片懒加载，提升页面性能。

<template>
  <img
    ref="image"
    :src="placeholder"
    :alt="alt"
    :class="className"
    @load="handleLoad"
  />
</template>

<script>
export default {
  name: 'LazyImage',
  props: {
    src: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: 'data:image/png;base64,...'
    },
    alt: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.$refs.image.src = this.src
          observer.unobserve(this.$refs.image)
        }
      })
    })
    observer.observe(this.$refs.image)
  },
  methods: {
    handleLoad() {
      this.$emit('loaded')
    }
  }
}
</script>

响应式图片组件

根据设备屏幕大小加载不同尺寸的图片。

<template>
  <picture>
    <source 
      v-for="(source, index) in sources" 
      :key="index"
      :media="source.media"
      :srcset="source.srcset"
    >
    <img :src="fallback" :alt="alt" :class="className">
  </picture>
</template>

<script>
export default {
  name: 'ResponsiveImage',
  props: {
    sources: {
      type: Array,
      required: true,
      validator: value => value.every(item => 
        'media' in item && 'srcset' in item
      )
    },
    fallback: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  }
}
</script>

图片加载状态处理

添加加载中和加载失败的状态处理。

<template>
  <div class="image-container">
    <img
      v-show="!isLoading && !hasError"
      :src="src"
      :alt="alt"
      @load="handleLoad"
      @error="handleError"
    >
    <div v-if="isLoading" class="loading-placeholder">
      <!-- 加载中状态 -->
    </div>
    <div v-if="hasError" class="error-placeholder">
      <!-- 加载失败状态 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageWithStatus',
  props: {
    src: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isLoading: true,
      hasError: false
    }
  },
  methods: {
    handleLoad() {
      this.isLoading = false
      this.hasError = false
    },
    handleError() {
      this.isLoading = false
      this.hasError = true
    }
  }
}
</script>

<style>
.image-container {
  position: relative;
}
.loading-placeholder,
.error-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

这些实现方法可以根据具体需求进行组合或扩展，构建适合项目需求的图片组件。