vue3实现图片预览

Vue3实现图片预览通常会结合HTML的`<img>`元素和JavaScript事件处理来完成。下面是一个简单的步骤示例：

1. 首先，在模板（template）部分，有一个输入框用于用户选择图片，比如`<input type="file" @change="handleFileChange">`。

2. 定义一个methods（方法）属性，如`handleFileChange`，这个方法会在用户选择文件后触发。例如：

   methods: {
     handleFileChange(e) {
       const file = e.target.files[0]; // 获取用户选择的第一个文件
       if (file) {
         this.currentImageURL = URL.createObjectURL(file); // 设置当前图片URL
         this.showPreview(); // 显示图片预览
       }
     },
   },

`URL.createObjectURL(file)`会创建一个临时的URL，可以在线上环境中安全地展示文件内容。

3. 在模板中，添加一个`v-if`或`v-show`指令来控制图片是否显示，例如：

   <div v-if="currentImageURL">
     <img :src="currentImageURL" alt="图片描述" @error="showError">
   </div>

4. 如果你想提供错误处理，可以在`<img>`标签内加入一个`@error`事件监听，如`showError()`方法来清除错误状态或者提示用户。

5. 当不再需要预览时，记得在适当的地方清理`currentImageURL`，如组件销毁时调用`window.URL.revokeObjectURL(this.currentImageURL)`。