JVxeTypes.image数据回显

Question

jeecg-boot JVxeTypes.image组件图片回显示怎么设置

Answer 1

JD-CV 上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

在jeecg-boot中，JVxeTypes.image组件用于上传和显示图片。如何设置图片回显可以通过以下步骤实现：

1. 确保你已经在数据库中保存了图片的路径。假设图片路径保存在数据库表的img字段中。

2. 在前端页面中，使用JVxeTypes.image组件来显示图片。可以在vue文件或html中使用如下代码：

<template>
  <div>
    <img :src="imgUrl" alt="图片">
  </div>
</template>

1. 在vue文件中，通过请求后台接口获取图片路径：

<script>
export default {
  data() {
    return {
      imgUrl: ''
    }
  },
  methods: {
    // 请求后台接口获取图片路径
    getImageUrl() {
      // 发送请求获取图片路径
      // 假设接口返回的数据为response.data.imgUrl
      this.imgUrl = response.data.imgUrl;
    }
  },
  mounted() {
    this.getImageUrl();
  }
}
</script>

1. 在后台接口中，获取图片路径并返回给前端。可以使用Java代码：

@GetMapping("/getImageUrl")
public String getImageUrl() {
  // 从数据库中查询图片路径
  // 假设图片路径保存在变量imgUrl中
  return imgUrl;
}

解决方案：

1. 在数据库中保存图片路径。
2. 在前端页面中使用JVxeTypes.image组件显示图片。
3. 在前端页面中通过请求后台接口获取图片路径。
4. 在后台接口中获取图片路径并返回给前端。

注意：以上代码只是示例，具体实现需要根据实际情况进行调整。