vue 实现图片

在 Vue 中实现图片显示和操作

Vue 提供了多种方式来实现图片的显示和操作，包括静态图片加载、动态图片绑定、懒加载等。以下是几种常见的方法：

静态图片加载

将图片放在项目的 public 或 assets 目录下，通过相对路径或绝对路径引用。public 目录下的图片会被直接复制到打包后的目录，而 assets 目录下的图片会被 webpack 处理。

<!-- 使用 public 目录下的图片 -->
<img src="/images/example.jpg" alt="Example Image">

<!-- 使用 assets 目录下的图片 -->
<img :src="require('@/assets/example.jpg')" alt="Example Image">

动态图片绑定

通过 Vue 的数据绑定动态加载图片，可以使用 v-bind 或简写 : 绑定图片路径。

<template>
  <img :src="imageUrl" alt="Dynamic Image">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

图片懒加载

使用 vue-lazyload 插件实现图片懒加载，减少初始页面加载时间。

npm install vue-lazyload --save

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

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

图片预览和放大

使用第三方库如 vue-image-lightbox 实现图片预览和放大功能。

npm install vue-image-lightbox --save

import VueLightbox from 'vue-image-lightbox';
Vue.use(VueLightbox);

<lightbox
  :images="images"
  :show-lightbox="showLightbox"
  @close="showLightbox = false"
></lightbox>

图片上传

使用 axios 或其他 HTTP 客户端库实现图片上传功能。

<template>
  <input type="file" @change="handleFileUpload">
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('image', file);

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('Upload successful', response.data);
      });
    }
  }
};
</script>

图片裁剪

使用 vue-cropperjs 实现图片裁剪功能。

npm install vue-cropperjs --save

import VueCropper from 'vue-cropperjs';
Vue.use(VueCropper);

<vue-cropper
  ref="cropper"
  :src="imageSrc"
  :aspect-ratio="16 / 9"
></vue-cropper>

响应式图片

使用 CSS 或 Vue 指令实现图片的响应式布局。

<img :src="imageUrl" alt="Responsive Image" style="max-width: 100%; height: auto;">

以上方法涵盖了 Vue 中图片的常见操作，可以根据具体需求选择合适的方式实现。