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

以下是一个简单的示例，使用Vue.js和Spring Boot从后端获取图像并在前端显示：

#### 后端代码

在Spring Boot中，您需要创建一个RESTful API来提供图像数据。以下是一个简单的示例：

@RestController
@RequestMapping("/api/images")
public class ImageController {
    
    @Autowired
    private ImageService imageService;
    
    @GetMapping("/{id}")
    public ResponseEntity<byte[]> getImage(@PathVariable Long id) {
        Image image = imageService.getImageById(id);
        if (image == null) {
            return ResponseEntity.notFound().build();
        }
        return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(image.getData());
    }
    
}

此控制器使用`ImageService`从数据库中获取图像数据，并将其作为`byte[]`返回。请注意，我们在响应头中设置了`Content-Type`为`image/jpeg`，以确保浏览器正确解析图像数据。

#### 前端代码

在Vue.js中，您可以使用`axios`库从后端获取图像数据，并使用`<img>`标签在前端显示它。以下是一个简单的示例：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  created() {
    axios.get('/api/images/1', { responseType: 'arraybuffer' })
      .then(response => {
        const imageBlob = new Blob([response.data], { type: 'image/jpeg' });
        this.imageUrl = URL.createObjectURL(imageBlob);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

在此示例中，我们使用`axios`从`/api/images/1`端点获取图像数据。请注意，我们将`responseType`设置为`arraybuffer`，以便正确处理二进制图像数据。

一旦我们获得了响应，我们将其转换为`Blob`对象，并使用`URL.createObjectURL()`方法创建图像的URL。然后，我们可以将其分配给`<img>`标签的`src`属性，以在前端显示图像。

#### 总结

这只是一个简单的示例，您可能需要根据您的具体需求进行修改。但是，这应该为您提供了一个基本的框架来从后端获取图像并在前端显示它们。