如何通过指向 REST api 的 href 标签显示图像？答案

【问题标题】：How can I display image by href tag pointing to REST api?如何通过指向 REST api 的 href 标签显示图像？
【发布时间】：2019-12-22 03:42:30
【问题描述】：

我正在构建一些网络应用程序。在我的前端，我需要显示之前上传到 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来获取图像数据，但我的卡仍然是空的。

请帮忙，因为我不知道如何使它工作。

【问题讨论】：

标签： html spring-boot

【解决方案1】：

所以，经过一天的研究，我终于弄明白了。基本上我犯了两个错误。首先，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()));
    }

现在它可以按预期工作了。

干杯:)

【讨论】：