vue图片的显示

在 Vue 和 Spring Boot 中显示图片的方法有很多种，其中一种常见的方法是在后端将图片转换成 Base64 编码的字符串，然后在前端使用 img 标签将其显示出来。具体实现可以参考以下代码：

前端：

<template>
  <div>
    <img :src="imageSrc" alt="image">
  </div>
</template>

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

后端：

import org.apache.commons.codec.binary.Base64;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.io.IOException;
import java.io.InputStream;

@Controller
public class ImageController {

    @GetMapping("/image")
    @ResponseBody
    public String getImage() throws IOException {
        Resource resource = new ClassPathResource("image.jpg");
        InputStream inputStream = resource.getInputStream();
        byte[] bytes = new byte[inputStream.available()];
        inputStream.read(bytes);
        String base64 = Base64.encodeBase64String(bytes);
        return "data:image/jpeg;base64," + base64;
    }
}