引言

准备工作

在开始之前，请确保您已经安装了Node.js和Vue CLI。如果没有，可以参考Vue官方文档进行安装。

步骤一：创建Vue项目

首先，使用Vue CLI创建一个新的Vue项目：

vue create my-vue-project

选择合适的配置选项，然后进入项目目录：

cd my-vue-project

步骤二：添加图片资源

步骤三：在Vue组件中使用图片

1. 使用img标签

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

2. 使用Vue的v-bind指令

<template>
  <img :src="imagePath" alt="示例图片" />
</template>

<script>
export default {
  data() {
    return {
      imagePath: '/example.jpg',
    };
  },
};
</script>

3. 使用Vue的v-for指令

<template>
  <div v-for="(image, index) in images" :key="index">
    <img :src="image.path" :alt="'示例图片' + index" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { path: '/example1.jpg' },
        { path: '/example2.jpg' },
        { path: '/example3.jpg' },
      ],
    };
  },
};
</script>

步骤四：图片预览和编辑

<template>
  <div>
    <tui-image-editor
      ref="imageEditor"
      :options="options"
      @imageChanged="onImageChanged"
    />
  </div>
</template>

<script>
import "tui-image-editor/dist/tui-image-editor.css";
import ImageEditor from "tui-image-editor";

export default {
  data() {
    return {
      options: {
        includeUI: {
          menu: ["fileType", "rotate", "crop", "flip", "scale", "filter"],
          // 更多配置...
        },
        // 更多配置...
      },
    };
  },
  mounted() {
    this.initImageEditor();
  },
  methods: {
    initImageEditor() {
      this.$refs.imageEditor.init({
        el: this.$refs.imageEditor.$el,
        // 更多配置...
      });
    },
    onImageChanged() {
      // 处理图片变化事件...
    },
  },
};
</script>

总结