57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<img v-if="imageSrc" :src="imageSrc" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import axios from 'axios';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "AuthedImage",
|
||
|
|
props: {
|
||
|
|
src: {
|
||
|
|
type: String,
|
||
|
|
default: function () {
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (this.src) {
|
||
|
|
console.error("GOT URL", this.src);
|
||
|
|
if (this.$matrix.useAuthedMedia) {
|
||
|
|
axios
|
||
|
|
.get(this.src, { responseType: "blob", headers: {
|
||
|
|
Authorization: `Bearer ${this.$matrix.matrixClient.getAccessToken()}`,
|
||
|
|
}})
|
||
|
|
.then((response) => {
|
||
|
|
this.imageSrc = URL.createObjectURL(response.data);
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log("Download error: ", err);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.imageSrc = this.src;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
destroyed() {
|
||
|
|
if (this.imageSrc && this.src != this.imageSrc) {
|
||
|
|
const url = this.imageSrc;
|
||
|
|
this.imageSrc = null;
|
||
|
|
URL.revokeObjectURL(url);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
imageSrc: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import "@/assets/css/chat.scss";
|
||
|
|
</style>
|