当前位置：首页 > VUE

vue实现图片加载

2026-03-08 14:51:40VUE

图片加载基础实现

在Vue中加载图片可以通过<img>标签直接绑定src属性实现。静态图片需放在public或assets目录，动态路径推荐使用require或import。

<template>
  <!-- 静态图片（public目录） -->
  <img src="/images/example.jpg" alt="Static Image">

  <!-- 动态图片（assets目录） -->
  <img :src="dynamicImage" alt="Dynamic Image">
</template>

<script>
export default {
  data() {
    return {
      dynamicImage: require('@/assets/images/dynamic.jpg')
    }
  }
}
</script>

懒加载实现

使用vue-lazyload库实现图片懒加载，减少首屏加载时间。

安装依赖：

npm install vue-lazyload

配置插件：

vue实现图片加载

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.png',
  loading: 'loading.gif',
  attempt: 3
})

使用方式：

<img v-lazy="imageUrl" alt="Lazy Image">

图片预加载技术

通过Image对象预加载图片，提升用户体验。

export default {
  methods: {
    preloadImages(urls) {
      urls.forEach(url => {
        const img = new Image()
        img.src = url
      })
    }
  },
  mounted() {
    this.preloadImages([
      require('@/assets/image1.jpg'),
      require('@/assets/image2.jpg')
    ])
  }
}

响应式图片处理

结合CSS和picture元素实现响应式图片。

vue实现图片加载

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive Image">
</picture>

图片加载状态处理

通过自定义指令处理图片加载状态。

Vue.directive('img-load', {
  inserted(el, binding) {
    const img = new Image()
    img.onload = () => {
      el.src = binding.value
      el.classList.add('loaded')
    }
    img.onerror = () => {
      el.classList.add('error')
    }
    img.src = binding.value
  }
})

使用方式：

<img v-img-load="imageUrl" class="loading-placeholder">

WebP格式兼容方案

通过特征检测自动切换WebP格式。

function checkWebPSupport() {
  return new Promise(resolve => {
    const webP = new Image()
    webP.onload = webP.onerror = () => {
      resolve(webP.height === 2)
    }
    webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'
  })
}

export default {
  async mounted() {
    const supportsWebP = await checkWebPSupport()
    this.imageFormat = supportsWebP ? 'webp' : 'jpg'
  }
}