avue-crud弹窗表单显示图片

Avue-Crud是一个基于Vue.js的轻量级前端组件库，它提供了一个方便的方式来创建表格操作和CRUD功能，包括数据增删改查。对于弹窗表单中展示图片，Avue-Crud通常会通过`<img>`标签配合`v-bind:src`指令来实现。当你需要显示图片时，可以在字段配置中设置`type`为`image`，然后绑定到一个后台返回的图片URL。

例如，在表单定义中：

<template>
  <avu-form @submit.prevent="save">
    <avu-field label="图片" type="image" :value="imageUrl" />
    <!-- 其他表单字段... -->
  </avu-form>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', // 这里用于存储图片链接
    };
  },
  methods: {
    save() {
      // 在这里处理表单提交，并更新图片URL
      this.$axios.post('/api/save', { imageUrl: this.imageUrl }).then(response => {
        //...
      });
    }
  },
};
</script>

当用户选择图片后，`imageUrl`会自动更新，显示在弹窗内的图片预览区域。如果需要上传本地图片，可以结合`@change`事件处理文件上传。