43 lines
981 B
Vue
43 lines
981 B
Vue
|
<template>
|
||
|
|
<img :src="image_data" :alt="src">
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import {mapActions} from "vuex";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "AuthenticatedImage",
|
||
|
|
props: {
|
||
|
|
src: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
image_data: "",
|
||
|
|
servers: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(['fetchImage']),
|
||
|
|
loadImage() {
|
||
|
|
this.fetchImage(this.src).then((response) => {
|
||
|
|
const mime_type = response.headers.get("content-type");
|
||
|
|
response.arrayBuffer().then((buf) => {
|
||
|
|
const base64 = btoa(new Uint8Array(buf)
|
||
|
|
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
|
||
|
|
this.image_data = "data:" + mime_type + ";base64," + base64;
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.loadImage();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|