后台 java
@PostMapping("/user/headaPicture")
public ResponseEntity<byte[]> getImage() throws IOException {
ClassPathResource imgFile = new ClassPathResource("image\\b.jpg");
byte[] bytes = StreamUtils.copyToByteArray(imgFile.getInputStream());
System.out.println(Arrays.toString(bytes));
return ResponseEntity.ok().contentType(MediaType.IMAGE_PNG).body(bytes);
}
前台 ant design pro for vue
<template>
<img :src="headaPictureUrl">
</template>
export default {
data () {
return {
headaPictureUrl: ''
}
}
mounted () {
this.getImage()
},
methods: {
async getImage () {
const response = await axios.post(Address.HeadaPicture, null, { responseType: 'arraybuffer' }) // 从服务端获取图片数据,并设置 responseType 属性为 'blob'
const blob = new Blob([response.data]) // 将二进制数据转换成 Blob 对象
this.headaPictureUrl = URL.createObjectURL(blob) // 使用 URL.createObjectURL() 方法将 Blob 对象转换成 URL,并将其赋值给 img 的 src 属性
console.log(this.headaPictureUrl)
}
},
}