mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
🐛 修复公告分享图banner缺失
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
<div class="tp-image-box" @click="showOverlay = true">
|
<div class="tp-image-box" @click="showOverlay = true">
|
||||||
<img
|
<img
|
||||||
:style="getImageStyle()"
|
:style="getImageStyle()"
|
||||||
:src="getImageUrl()"
|
:src="localUrl"
|
||||||
:alt="props.data.insert.image"
|
:alt="props.data.insert.image"
|
||||||
:title="getImageTitle()"
|
:title="getImageTitle()"
|
||||||
/>
|
/>
|
||||||
@@ -10,8 +10,9 @@
|
|||||||
<TpoImage :image="props.data" v-model="showOverlay" />
|
<TpoImage :image="props.data" v-model="showOverlay" />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { StyleValue, ref } from "vue";
|
import { StyleValue, ref, onMounted, onUnmounted } from "vue";
|
||||||
|
|
||||||
|
import { saveImgLocal } from "../../utils/TGShare.js";
|
||||||
import { bytesToSize } from "../../utils/toolFunc.js";
|
import { bytesToSize } from "../../utils/toolFunc.js";
|
||||||
|
|
||||||
import TpoImage from "./tpo-image.vue";
|
import TpoImage from "./tpo-image.vue";
|
||||||
@@ -35,9 +36,19 @@ interface TpImageProps {
|
|||||||
|
|
||||||
const props = defineProps<TpImageProps>();
|
const props = defineProps<TpImageProps>();
|
||||||
const showOverlay = ref(false);
|
const showOverlay = ref(false);
|
||||||
|
const localUrl = ref<string>();
|
||||||
|
|
||||||
console.log("tp-image", props.data.insert.image, props.data.attributes);
|
console.log("tp-image", props.data.insert.image, props.data.attributes);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const link = getImageUrl();
|
||||||
|
localUrl.value = await saveImgLocal(link);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (localUrl.value) URL.revokeObjectURL(localUrl.value);
|
||||||
|
});
|
||||||
|
|
||||||
function getImageStyle(): StyleValue {
|
function getImageStyle(): StyleValue {
|
||||||
let style: StyleValue = <Array<StyleValue>>[];
|
let style: StyleValue = <Array<StyleValue>>[];
|
||||||
style.push("cursor: pointer");
|
style.push("cursor: pointer");
|
||||||
@@ -67,7 +78,6 @@ function getImageTitle(): string {
|
|||||||
function getImageUrl(): string {
|
function getImageUrl(): string {
|
||||||
const img = props.data.insert.image;
|
const img = props.data.insert.image;
|
||||||
const append = "?x-oss-process=image/format,png";
|
const append = "?x-oss-process=image/format,png";
|
||||||
console.log("getImageUrl", img, append);
|
|
||||||
if (img.endsWith(".gif")) return img;
|
if (img.endsWith(".gif")) return img;
|
||||||
return img + append;
|
return img + append;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user