60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<img :src="imageURL" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
|
import { cardImageURL } from "../../mlpccg";
|
|
|
|
@Component({
|
|
components: {}
|
|
})
|
|
export default class CardImage extends Vue {
|
|
@Prop()
|
|
private id!: string;
|
|
|
|
private loaded!: boolean;
|
|
private loadedURL!: string;
|
|
private loadedTimeout!: boolean;
|
|
|
|
private data() {
|
|
return {
|
|
loaded: false,
|
|
loadedURL: "",
|
|
loadedTimeout: false
|
|
};
|
|
}
|
|
|
|
private mounted() {
|
|
this.fetchImage();
|
|
setTimeout(() => {
|
|
if (!this.loaded) {
|
|
this.loadedTimeout = true;
|
|
}
|
|
}, 100);
|
|
this.$watch("id", () => {
|
|
this.loaded = false;
|
|
this.fetchImage();
|
|
});
|
|
}
|
|
|
|
private async fetchImage() {
|
|
const url = await cardImageURL(this.id);
|
|
this.loaded = true;
|
|
this.loadedURL = url;
|
|
}
|
|
|
|
private get imageURL(): string {
|
|
if (this.loaded) {
|
|
return this.loadedURL;
|
|
}
|
|
if (this.loadedTimeout) {
|
|
return require("@/assets/images/cardback.webp");
|
|
}
|
|
return "";
|
|
}
|
|
}
|
|
</script>
|