数据库已存在图片地址 vue form表单如何显示

如果你想在Vue表单中展示数据库中已有的图片地址，可以使用Vue.js的绑定语法来实现。首先，在你的Vue组件中，你需要为表单的对应输入框或者其他元素设置一个v-model指令，这个指令可以与你的数据模型进行双向绑定，例如：

<!-- 假设你的数据模型中有一个名称为imageUrl的属性，保存了数据库中的图片地址 -->
<template>
  <div>
    <img :src="imageUrl" alt="">
    <input v-model="imageUrl" type="text">
  </div>
</template>

在上面的代码中，在Img标签中，你可以直接在src属性中使用imageUrl属性，这样图片地址就可以动态展示。在input标签中，需要保证v-model和数据模型中的imageUrl属性相对应。

接下来，当你从数据库中检索图片地址之后，可以通过Vue.js异步请求，并将结果保存到数据模型imageUrl属性中，例如：

export default {
  data() {
    return {
      imageUrl: ''  
    };
  },
  created() {
    this.getImageUrl(); // 异步请求图片地址
  },
  methods: {
    async getImageUrl() {
      const res = await axios.get('api/getImageUrl'); // 假设你获取图片地址的API地址为api/getImageUrl
      this.imageUrl = res.data.imageUrl; // 将结果保存到数据模型中
    }
  }
};

方法中我们使用axios库来异步发送HTTP请求，根据自己的实际情况调整API地址。当异步请求完成后，我们将后端返回的图片地址保存到Vue.js组件的数据模型中，然后图片地址就可以在组件中展示。