html 用vue+spring boot从后台拿去图片显示在前端

要在前端使用 Vue 和后端使用 Spring Boot 来显示从后端获取的图片，你可以按照以下步骤进行：

1. 在后端(Spring Boot)中，创建一个 REST API 来获取图片。可以使用 Spring Boot 的 `@RestController` 和 `@GetMapping` 注解来定义一个简单的 API。

2. 在前端(Vue)中，使用 `axios` 或 `vue-resource` 等插件发送 GET 请求到后端 API 获取图片数据。

3. 在 Vue 组件中，使用 `img` 标签来渲染获取到的图片数据。可以将获取到的图片数据作为 `src` 属性的值，如下所示：

<template>
  <div>
    <img :src="imageUrl" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  mounted() {
    this.fetchImage();
  },
  methods: {
    fetchImage() {
      axios.get('/api/image').then((response) => {
        this.imageUrl = response.data;
      });
    },
  },
};
</script>

其中，`fetchImage` 方法发送 GET 请求到后端 API 获取图片数据，并将获取到的数据赋值给 `imageUrl` 变量。然后，将 `imageUrl` 变量作为 `img` 标签的 `src` 属性的值，来渲染图片数据。

4. 在后端(Spring Boot)中，将图片数据以二进制流的形式返回给前端。可以使用 `ResponseEntity<byte[]>` 类型来包装图片数据，并设置正确的 HTTP 头信息，如下所示：

@RestController
public class ImageController {
  
  @GetMapping("/api/image")
  public ResponseEntity<byte[]> getImage() throws IOException {
    InputStream in = getClass().getResourceAsStream("/image.jpg");
    byte[] imageBytes = IOUtils.toByteArray(in);
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.IMAGE_JPEG);
    headers.setContentLength(imageBytes.length);
    return new ResponseEntity<>(imageBytes, headers, HttpStatus.OK);
  }
  
}

其中，`getImage` 方法读取图片文件并将其转换为 byte 数组。然后，使用 `HttpHeaders` 类型设置正确的 MIME 类型和内容长度，并使用 `ResponseEntity<byte[]>` 类型包装图片数据并返回给前端。

这样，你就可以使用 Vue 和 Spring Boot 从后端获取图片并显示在前端了。