springboot+vue显示图片

在Spring Boot项目中，可以使用Spring Boot提供的静态资源处理机制来向Vue前端提供图片资源。首先，需要配置Spring Boot的静态资源目录，在application.properties中添加如下配置：

spring.resources.static-locations=classpath:/static/

在这个配置中，我们指定了静态资源的位置为“classpath:/static/”，也就是在Classpath下的static目录。在该目录下新建一个images目录，并在其中添加一张图片“test.jpg”。

接下来，在Vue的代码中通过axios请求Spring Boot的Restful API获取图片。代码如下：

<template>
  <img :src="imageUrl" alt="Test Image">
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  mounted() {
    axios.get('/api/images/test.jpg', { responseType: 'arraybuffer' })
      .then(res => {
        const blob = new Blob([res.data], { type: res.headers['content-type'] })
        this.imageUrl = URL.createObjectURL(blob)
      })
  }
}
</script>

在Vue中，通过mounted钩子函数发送一个GET请求，在请求中指定响应的数据类型是“arraybuffer”。当请求响应后，将响应数据转换成一个Blob对象，并将其转换成URL类型的图片地址，赋值给Vue实例的imageUrl属性。

最后，当Vue渲染完成后，可以在页面上看到图片的显示效果。