vue实现展示图片

在 Vue 中展示图片的方法

静态图片展示

静态图片通常存放在项目的 public 或 assets 目录下。使用 img 标签直接引用。

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

@/assets 是 Vue CLI 项目的默认资源目录，Webpack 会处理这些资源。

动态绑定图片路径

当图片路径需要根据数据动态变化时，使用 v-bind 或简写 : 绑定 src 属性。

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

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

使用 require 确保 Webpack 能正确解析路径。

使用 Base64 编码图片

对于小图片，可以直接使用 Base64 编码嵌入。

<template>
  <img src="data:image/png;base64,iVBORw0KGgo..." alt="Base64图片">
</template>

图片懒加载

实现图片懒加载可以优化页面性能，使用 vue-lazyload 插件。

安装插件：

npm install vue-lazyload

在 main.js 中配置：

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

组件中使用：

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

图片加载状态处理

添加加载中和加载失败的占位图。

<template>
  <div>
    <img 
      :src="imageUrl" 
      @load="onImageLoad" 
      @error="onImageError" 
      alt="图片"
    >
    <div v-if="isLoading">加载中...</div>
    <div v-if="isError">加载失败</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      isError: false,
      imageUrl: 'path/to/image.jpg'
    }
  },
  methods: {
    onImageLoad() {
      this.isLoading = false
    },
    onImageError() {
      this.isLoading = false
      this.isError = true
    }
  }
}
</script>

使用第三方图片服务

集成第三方图片服务如 Cloudinary 或 Imgix。

<template>
  <img :src="`https://res.cloudinary.com/demo/image/upload/${imageId}.jpg`" alt="Cloudinary图片">
</template>

响应式图片

使用 srcset 和 sizes 属性实现响应式图片。

<template>
  <img 
    srcset="@/assets/small.jpg 480w, @/assets/large.jpg 1080w"
    sizes="(max-width: 600px) 480px, 1080px"
    src="@/assets/fallback.jpg"
    alt="响应式图片"
  >
</template>

图片组件封装

封装可复用的图片组件。

<template>
  <div class="image-container">
    <img 
      :src="src" 
      :alt="alt"
      @load="handleLoad"
      @error="handleError"
    >
    <div v-if="loading" class="loading-placeholder">加载中...</div>
    <div v-if="error" class="error-placeholder">加载失败</div>
  </div>
</template>

<script>
export default {
  props: {
    src: String,
    alt: String
  },
  data() {
    return {
      loading: true,
      error: false
    }
  },
  methods: {
    handleLoad() {
      this.loading = false
    },
    handleError() {
      this.loading = false
      this.error = true
    }
  }
}
</script>

<style scoped>
.image-container {
  position: relative;
}
.loading-placeholder,
.error-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
</style>

以上方法涵盖了 Vue 中展示图片的常见场景，从基础展示到高级功能如懒加载和错误处理，可根据实际需求选择合适的方式。