如何在Vue中实现图片预览功能？

在Vue中实现图片预览功能，通常需要以下几个步骤：

1. **创建一个图片容器**：在模板中添加一个`img`标签作为容器，它会显示图片预览。初始时设为占位符，例如一个默认的图标或空图。

<template>
  <div>
    <img :src="previewImageUrl || placeholderUrl" alt="图片预览" @error="handleError">
  </div>
</template>

这里的`previewImageUrl`将会存储实际的图片URL，而`placeholderUrl`则是默认的占位图片地址。

2. **绑定数据属性**：在Vue实例的data中定义这两个变量，并初始化占位图片URL。

export default {
  data() {
    return {
      previewImageUrl: '',
      placeholderUrl: 'default-placeholder-image-url',
    };
  },
};

3. **处理图片选择**：当用户选择图片后，更新`previewImageUrl`。这通常通过事件处理器来完成，如`handleImageUpload`方法（之前我们已经讨论过）。

methods: {
  handleImageUpload(file) {
    const reader = new FileReader();
    reader.onload = (event) => {
      this.previewImageUrl = event.target.result;
    };
    reader.readAsDataURL(file);
  },
  handleError(event) {
    console.error('图片加载失败', event);
  },
},

`FileReader`允许浏览器读取本地文件，`readAsDataURL`将图片转换为Base64字符串。