当前位置：首页 > VUE

vue实现图片加载

2026-03-29 01:48:29VUE

图片加载基础方法

在Vue中加载图片可以通过直接使用<img>标签或结合动态绑定实现。静态图片直接指定路径，动态图片使用v-bind绑定数据。

静态加载示例：

<img src="@/assets/example.jpg" alt="示例图片">

动态加载示例：

<template>
  <img :src="imagePath" alt="动态图片">
</template>

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

使用require动态加载

当需要动态切换图片时，建议使用require方法确保Webpack正确处理路径。这种方式适合在v-for循环中加载不同图片。

<template>
  <div v-for="item in items" :key="item.id">
    <img :src="require(`@/assets/${item.imageName}`)" :alt="item.altText">
  </div>
</template>

图片懒加载实现

对于长页面中的图片，使用懒加载可以提升性能。Vue-lazyload是常用插件。

安装插件：

npm install vue-lazyload

配置使用：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'loading-spinner.gif',
  attempt: 3
})

模板中使用：

<img v-lazy="imageUrl" alt="懒加载图片">

图片加载状态处理

添加加载中和加载失败的状态处理可以改善用户体验。

<template>
  <div class="image-container">
    <img 
      :src="imageUrl" 
      @load="handleLoad"
      @error="handleError"
      v-show="!isLoading && !isError">
    <div v-if="isLoading" class="loading-placeholder">加载中...</div>
    <div v-if="isError" class="error-placeholder">图片加载失败</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      isError: false
    }
  },
  methods: {
    handleLoad() {
      this.isLoading = false
    },
    handleError() {
      this.isLoading = false
      this.isError = true
    }
  }
}
</script>

响应式图片处理

针对不同屏幕尺寸加载不同图片，可以使用<picture>元素结合媒体查询。

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

图片预加载技术

对于关键图片资源，可以使用预加载确保及时显示。

vue实现图片加载

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