Vue在form表单中如何显示图片

在 Vue 的 form 表单中，要展示图片可以通过以下步骤实现：

1. 在 data 中定义一个变量，用于存储图片的 URL：

data() {
  return {
    imageUrl: 'https://example.com/image.png'
  }
}

2. 在模板中使用 img 标签来展示图片，将 src 属性绑定到刚才定义的变量：

<form>
  <label>图片:</label>
  <img :src="imageUrl" alt="图片">
</form>

3. 如果需要用户上传图片，可以使用 input 标签的 type 属性设置为 file，然后通过 JavaScript 获取用户选择的文件，并将其转换为 URL。例如：

<form>
  <label>上传图片:</label>
  <input type="file" @change="handleFileChange">
  <img :src="imageUrl" alt="图片">
</form>

methods: {
  handleFileChange(event) {
    const file = event.target.files[0]
    this.imageUrl = URL.createObjectURL(file)
  }
}

这样，当用户选择文件后，图片的 URL 就会被更新为新选择的文件的 URL，从而在页面中展示新的图片。