use AuthenticatedImage component in Items view
This commit is contained in:
parent
21ec29caa8
commit
c5023202fc
3 changed files with 52 additions and 14 deletions
43
web/src/components/AuthenticatedImage.vue
Normal file
43
web/src/components/AuthenticatedImage.vue
Normal file
|
@ -0,0 +1,43 @@
|
|||
<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>
|
Loading…
Add table
Add a link
Reference in a new issue