我正在构建一些Web应用程序。在我的前端，我需要显示之前上传到spring-boot hsqldb的图像。图像数据在数据库中以BLOB类型存储。我想将它们显示为：
<img href="/api/photos/0">
过去，我向我的api发送GET请求以获取字节数组的图像数据，而不是将其编码为Base64，以字符串“data： image/jpg；base64，myData”发送回来并将其放入img src，它工作得很好。现在我想检查一些不同的方法，我被卡住了。
这是我的vue模板：
<div class="card">
<div class="card-header"><h4>Some header</h4></div>
<div class="card-body">
<img class="card-img-top" :href="url">
</div>
</div>
这是我的vue方法构建url：
export default {
data(){
return{
url:''
}
},
mounted() {
this.makeUrl();
},
methods:{
makeUrl(){
this.url="/api/photos/0";
}
}
}
这是我的spring-boot api控制器：
@GetMapping(value = "/photos/{id}")
public String readPhoto(@PathVariable Long id){
return makePhotoUrl(photosRepository.findById(id).get().getData());
}
private String makePhotoUrl(byte[] photo){
String photoUrl = "data:image/jpeg;base64," +
Base64.getEncoder().encodeToString(photo);
return photoUrl;
}
我确实通过浏览器直接访问url来获取图像数据，但我的卡仍然是空的。
请帮助，因为我没有更多的想法如何使它工作。
所以，经过又一天的研究，我终于弄清楚了。基本上我犯了两个错误。首先，href指定链接目的地，但它应该只与“a”标签一起使用：
<a href = "www.someWebsite.com">link</a>
如果我想指定img源，我应该使用“src”：
<img src = "www.someOtherWebsite.com">
其次，如果我想返回url作为api的直接响应，它必须指向一个物理文件。我可能错了，所以请纠正我。我已经将我的控制器更改为：
public ResponseEntity<Resource> readPhotoById(Long id) {
Photo photo = photosRepository.findById(id).get();
return ResponseEntity.ok()
.contentType(MediaType.parseMediaType(photo.getType()))
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + photo.getName() + "\"")
.body(new ByteArrayResource(photo.getData()));
}
现在它按预期工作。
干杯：）
