Witam. Pracuję nad pewną aplikacją mobilną, w której muszę obsłużyć wczytywanie zdjęć z bazy danych. Zależy mi, aby zrobić coś takiego:
<img src="/api/photos/0">
Mój template wygląda następująco:
<div class="card">
<div class="card-header"><h4>Some header</h4></div>
<div class="card-body">
<img class="card-img-top" :src="url">
</div>
</div>
Metoda budująca url (vue):
export default {
data(){
return{
url:''
}
},
mounted() {
this.makeUrl();
},
methods:{
makeUrl(){
this.url="/api/photos/0";
}
}
}
0 na końcu adresu url jest to Id konkretnego zdjęcia.
I na koniec kontroler:
@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/jpg;base64," +
Base64.getEncoder().encodeToString(photo);
return photoUrl;
}
Bardzo proszę o pomoc, albo jakąś wskazówkę.
Pozdrawiam.